This question has already been answered:

There is an array in json format, while it is in the code, everything works. If I put it into a separate json file and in the code I call it into a variable, then the output in html does not work.

{ 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: "Гродно", }] }] }

so i get json into variable

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

I deduced in html an array so

 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>');

with console.log(tree); I get in the console output tree variable to console

Reported as a duplicate by Grundy , zRrr , user194374, aleksandr barakin , PashaPash ♦ Jun 26 '16 at 7:37 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • "html output doesn't work" - what does this mean? 1. You use the json variable before the function (data) { json = data;} executed. and / or 2. You mistakenly believe that the tree variable contains your data. - Igor
  • json = JSON.parse (data); - Maxim Drobyshev
  • Look in the developer console in the browser. Maybe there are errors. - Maxim Drobyshev
  • 2
    read what $.get : api.jquery.com/jquery.get - Igor
  • Maybe you better getJSON instead of get. - Vladimir Gamalyan

4 answers 4

You need to enclose property names in quotes

 { "id": 0, "title": "root - not displayed", "children": [{ "id": 0, "title": "Россия", "children": [{ ...
  • adding quotes doesn't help ( - George Skripak
  • This is an approach to programming - called the "cult of cargo aircraft." "And let's try to add quotes, suddenly help?" - Igor
  • Quotes in any case are needed if you want to adhere to the standard. - Vladimir Gamalyan
  • one
    Here, if interested, the specification is json.org - Stranger in the Q
  • one
    @GeorgeSkripak, this is all because so many people confuse JSON, and literal notation when declaring objects in javascript - they are very different, JSON imposes quite a lot of restrictions on what and how to write - Grundy

Here:

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

Your answer from the server is placed in the json variable, and then for some reason you use the variable tree .

In addition, instead of $ .get, use getJson , which is designed for this not to parse the text of the answer.

  • corrected to var tree = $.getJSON('cityTreeExample.json', function (data) { tree = data;}); but no changes - George Skripak
  • Maybe you do not wait until the answer comes, and immediately try to use the tree? - Vladimir Gamalyan
  • and how to wait until the answer comes? - George Skripak
  • Call addCityTree($('.js-city-tree'), tree); in $.getJSON('cityTreeExample.json', function (data) { ... }); - Vladimir Gamalyan pm
  • I have already tried this option, it does not work, I still can not understand why when I assign an array to a variable and then call this variable, everything works, and when I receive it from an external file, it does not work - George Skripak

the problem is solved, in getJSON we put the array processing function in this way and everything works.

 $.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>'); });

PS there was a small joint with the json file structure, rewritten to such (it’s not just in quotes)

 { "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" } ] } ] } ] } 

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