Проблема с выводом json массива в html

Question

Есть массив в json формате, пока он в коде, все работает. Если выношу его в отдельный json-файл и в коде вызываю его в переменную, то вывод в html не работает.

{
  id: 0,
  title: "root - not displayed",
  children: [{
    id: 0,
    title: "Россия",
    children: [{
      id: 0,
      title: "Архангельская обл",
      children: [{
        id: 111,
        title: "Архангельск",
      }, {
        id: 112,
        title: "Северодвинск",
      }]
    }, {
      id: 12,
      title: "Москва",
    }]
  }, {
    id: 0,
    title: "Украина",
    children: [{
      id: 21,
      title: "Киев",
    }, {
      id: 22,
      title: "Одесса",
    }]
  }, {
    id: 0,
    title: "Белоруссия",
    children: [{
      id: 31,
      title: "Минск",
    }, {
      id: 32,
      title: "Гродно",
    }]
  }]
}

так получаю json в переменную

var tree = $.get('cityTreeExample.json', function (data) { tree = data;});

вывожу в html массив так

function addCityTree(parentUL, branch) {
  for (var key in branch.children) {
    var item = branch.children[key];
    $item = $('<li>', {
      id: "item" + item.id,
      class: 'list-tree__sub-item'
    });
    if (item.id==0)
    {
      $item.append($('<div>', {
        class: 'toogle-accordion',
        text: item.title
      }));
    }
    else {
      $item.append($('<input>', {
        type: "checkbox",
        id: item.id,
        value: item.title
      }));
      $item.append($('<label>', {
        for: item.id,
        text: item.title,
      }));
      $item.wrapInner($('<div>', {
        class: 'checkbox'
      }));
    }
    parentUL.append($item);
    if (item.children) {
      var $ul = $('<ul>', { 
        class: 'list-tree__sub-list'
      }
      ).appendTo($item);
      $item.append();
      addCityTree($ul, item);
    }
  }
}
//call function, which builds tree from json
addCityTree($('.js-city-tree'), tree);
  $(':checkbox').each(function () {
    $(this).find(':checkbox');
    var matchingId = $(this).attr('id');
    ($(this).attr('checked'))
      $('input[id*=' + matchingId +']').each(function() {
        $(this).removeAttr('checked');
        $(this).prop('checked', $(this).attr('checked'));
      });
  });
  $('.toogle-accordion').click(function(){
    $(this).closest('li').children('ul').slideToggle();
  });
  // add span tag to label
  $('.list-tree__sub-item label').prepend('<span></span>');

при console.log(tree); получаю в консоли

Answer 1

Вам нужно заключить названия свойств объектов в кавычки

{
  "id": 0,
  "title": "root - not displayed",
  "children": [{
    "id": 0,
    "title": "Россия",
    "children": [{
...

Answer 2

Вот здесь:

var tree = $.get('cityTreeExample.json', function (data) { json = data;});

У вас ответ от сервера помещается в переменную json, а затем вы почему то используете переменную tree.

Кроме того вместо $.get, используйте getJson, который для этого и предназначен, чтобы не парсить текст ответа.

Answer 3

проблема решена, в getJSON кладем функцию обработки массива таким образом и все работает.

$.getJSON("cityTreeNon.json", function(tree) {
function addCityTreeCheckbox(parentUL, branch) {
  for (var key in branch.children) {
    var item = branch.children[key];
    $item = $('<li>', {
      id: "item" + item.id,
      class: 'list-tree__sub-item'
    });
    if (item.id==0)
    {
      $item.append($('<div>', {
        class: 'toogle-accordion',
        text: item.title
      }));
    }
    else {
      $item.append($('<input>', {
        type: "checkbox",
        id: item.id,
        value: item.title
      }));
      $item.append($('<label>', {
        for: item.id,
        text: item.title
      }));
      $item.append($('<span>'));
      $item.wrapInner($('<div>', {
        class: 'checkbox'
      }));
    }
    parentUL.append($item);
    if (item.children) {
      var $ul = $('<ul>', { 
        class: 'list-tree__sub-list'
      }
      ).appendTo($item);
      $item.append();
      addCityTreeCheckbox($ul, item);
    }
  }
}
//call function, which builds tree from json
addCityTreeCheckbox($('.js-city-tree'), tree);
$('.toogle-accordion-workactivity').click(function(){
  $(this).closest('li').children('ul').toggle();
});
// add span tag to label
$('.list-tree__sub-item label').prepend('<span></span>');
});

P.S был небольшой косяк со структурой json файла, переписал на такое (дело не только в кавычках)

{
  "id": 0,
  "title": "root - non displayed",
  "children": [
    {
      "id": 0,
      "title": "Russia",
      "children": [
        {
          "id": 0,
          "title": "Vol obl",
          "children": [
            {
              "id": 111,
              "title": "Vologda"
            },
            {
              "id": 222,
              "title": "Cherep"
            }
          ]
        }
      ]
    }
  ]
}

Answer 4

$.getJSON('cityTreeExample.json', function (json) { 
console.log(json);
});