Question

您好我试图在嵌套表中读取json数据和显示数据我也给出了我的预期结果，并且还发布了我尝试过的脚本。

我的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"
      }
   ]
}

我的剧本

<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>

请帮助我实现这一点，让我的脚本错误

Answer 1

我的剧本出了什么问题？

在您的每个.each回调中，您执行的操作完全相同。
您应该使用递归而不是未知数量的循环。
在调用.each之前，您永远不会检查对象是否具有子属性。这会导致undefined传递给.each，这会导致以下错误：我在测试的jQuery版本中出现Cannot read property 'length' of undefined。

请帮我实现这个目标

我不会尝试让结果看起来像你问题中的第2页图像。但是这里的代码清理了一下，包括两种不同的方法来处理JSON数据。

这是问题中提供的代码的固定版本。

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

在这个例子中，表是嵌套的：

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

Answer 2

以下是部分答案：

function drawData(data,parent) { 
     $.each(data,function(index,item){
         var cell=$("<div><div>");
         cell.text(item.label);
         if(item.children) {
             drawData(item.children,cell);
         }
         parent.append(cell);
     });
}

您应该能够根据需要调整此代码

从文件中读取Jquery数据

2 个答案: