javascript - Read a Jquery Data from File -

hi im trying read json data , display data in nested table have give expected result , posted script have tried.

my data.json

 {"data":[       {          "label":"node1",          "color":"red",          "children":[             {                "label":"vip1",                "color":"red",                "children":[                   {                      "label":"obj1",                      "color":"gray",                      "id":"539803eae4b0ffad82491508"                   },                   {                      "label":"obj2",                      "color":"green",                      "id":"5395635ee4b071f136e4b691"                   },                   {                      "label":"obj3",                      "color":"green",                      "id":"539803e4e4b0ffad82491507"                   }                ],                "id":"53956358e4b071f136e4b690"             },             {                "label":"vip2",                "color":"blue",                "id":"539803f2e4b0ffad82491509"             }          ],          "id":"5395634ee4b071f136e4b68e"       },       {          "label":"node2",          "children":[             {                "label":"vip1",                "color":"green",                "id":"539803eae4b0ffad82491501"             },             {                "label":"vip2",                "color":"green",                "id":"5395635ee4b071f136e4b694"             }          ],          "id":"5395637fe4b071f136e4b692"       },       {          "label":"node3",          "color":"red",          "children":[           ],          "id":"5395637fe4b071f136e4b692"       }    ] }  

my script

<script>     $.getjson( "data/widgetdata.json", function( data ) {     $('#widget').append('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">');     var table = $('#widget').children();     table.append( '<tr height="30" style="background-color:black"><td>title</td></tr>' ); $.each(data.widgetdata, function(index0, v) {     //alert(v.color);       table.append( '<tr height="180" style="background-color:'+v.color+'"><td>'+v.label+'</td></tr>' );      $.each(v.children, function (index1, w) {         //alert(w.label);         table.append( '<tr height="180" style="background-color:'+w.color+'"><td>'+w.label+'</td></tr>' );          $.each(w.children, function (index2, x) {         // alert(x.label);         });             }); }); table.append('</table>'); });  </script> 

please me achieve , let me whats wrong script

what's wrong script?

1. in each of .each callbacks doing same thing.
2. you should using recursion instead of unknown number of loops.
3. you never checking see if object has children property before calling .each. results in undefined being passed .each cause following error: cannot read property 'length' of undefined in versions of jquery tested with.

please me achieve this

i not going try make result page 2 image in question. here code cleaned bit, including 2 different ways recurse on json data.

this fixed version of code provided in question.

function ajaxresponsehandler(data) {     var table = $('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">');     $('#widget').append(table);      table.append('<tr height="30" style="background-color:black"><td>title</td></tr>');     appendtr(table, data.widgetdata); }  // recurse on data structure,  // instead of writing unknown number of loops within loops function appendtr(table, data) {     $.each(data, function (i, obj) {         table.append('<tr height="180" style="background-color:' + obj.color + ';"><td>' + obj.label + '</td></tr>');         if (obj.children && obj.children.length) {             appendtr(table, obj.children);         }     }); } 

here demo

in example tables nested:

function ajaxresponsehandler(data) {     var table = $('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">'),         tr = $('<tr height="30" style="background-color:black"></tr>'),         td = $('<td>title</td>');     $('#widget').append(table);     tr.append(td);     table.append(tr);     td.append(appendtr(data.widgetdata)) }  function appendtr(data) {     var table = $('<table style="border:1px solid white;width:100%">');     $.each(data, function (i, obj) {         var tr = $('<tr height="180" width="180" style="background-color:' + obj.color + ';"></tr>'),             td = $('<td>' + obj.label + '</td>');         tr.append(td);         table.append(tr);         if (obj.children && obj.children.length) {             td.append(appendtr(obj.children));         }     });      return table; } 

fiddle