从文件读取一个jQuery数据

Question

Hi im trying to Read json data and display data in nested table i have also give my expected result and also posted my script which i 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 help me to achieve this and let me whats wrong with my script

Answer 1

what's wrong with my script?

1. In each of your .each callbacks you are doing exactly the same thing.
2. You should be using recursion instead of an unknown number of loops.
3. You are never checking to see if an object has a children property before calling .each. This results in undefined being passed to .each this will cause the following error: Cannot read property 'length' of undefined in the versions of jQuery I tested with.

Please help me to achieve this

I am not going to try to make the result look like the page 2 image in your question. But here is the code cleaned up a bit, including two different ways to recurse over the JSON data.

This is a fixed version of the code provided in the 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 over the data structure, 
// instead of writing an 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 is a demo

In this example the tables are 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