Javascript 从文件中读取Jquery数据

嗨，我正在尝试读取json数据并在嵌套表中显示数据，我也给出了我的预期结果，并发布了我尝试过的脚本

我的数据.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>

$.getJSON（“data/widgetData.json”，函数（data）{
$（'#widget'）。追加（''）；
var table=$（'#widget'）.children（）；
表.追加（‘标题’）；
$.each（data.widgetData，函数（index0，v）{
//警惕（v.color）；
表.附加（“”+v.标签+“”）；
$。每个（v.子项，函数（index1，w）{
//警报（w.标签）；
表.附加（“”+w.标签+“”）；
$。每个（w.子项，函数（index2，x）{
//警报（x.label）；
});        
});
});
表.附加（“”）；
});

请帮我实现这一点，让我看看我的脚本有什么问题

我的剧本怎么了

在每个

回调中，您都在做完全相同的事情

您应该使用递归，而不是未知数量的循环

在调用

。each

之前，您永远不会检查对象是否具有子属性。这将导致

undefined

被传递到

。每个
都将导致以下错误：
无法读取我测试的jQuery版本中未定义的
的属性“length”

请帮助我实现这一目标

我不会试图让结果看起来像你问题中的第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);
        }
    });
}

函数ajaxResponseHandler（数据）{
变量表=$（''）；
$（“#小部件”）.append（表）；
表.追加（“标题”）；
附录TR（表，data.widgetData）；
}
//在数据结构上递归，
//而不是在循环中写入未知数量的循环
函数appendr（表、数据）{
$。每个（数据、功能（i、obj）{
表.附加（“”+obj.label+“”）；
if（obj.children&&obj.children.length）{
附录TR（表，对象儿童）；
}
});
}

在本例中，表是嵌套的：

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

函数ajaxResponseHandler（数据）{
变量表=$（''），
tr=$（''），
td=$（“标题”）；
$（“#小部件”）.append（表）；
tr.append（td）；
表3.追加（tr）；
td.append（appendTr（data.widgetData））
}
函数appendr（数据）{
变量表=$（''）；
$。每个（数据、功能（i、obj）{
var tr=$（''），
td=$（''+obj.label+''）；
tr.append（td）；
表3.追加（tr）；
if（obj.children&&obj.children.length）{
td.append（appendr（obj.children））；
}
});
返回表；
}

以下是部分答案：

函数drawData（数据，父项）{
$。每个（数据、功能（索引、项目）{
变量单元格=$（“”）；
单元格.文本（项目.标签）；
if（项目.子项）{
drawData（项、子项、单元格）；
}
父项追加（单元格）；
});
}

---

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

这些图像无法帮助我们理解您的意图。原始表会是什么样子？@DelightedD0D很抱歉给您带来不便，请忽略图片我的期望是需要在HTML表中显示基于JSON子节点的嵌套JSON数据。我的意思是您可以读取数据并从中创建任意数量的嵌套表组合。如果您能向我们展示您希望最终得到的原始html表，这将真正帮助我们理解您需要做什么do@DelightedD0D我的期望是“基于json数据呈现小部件。它最多可以包含3列，行可以根据数据增长。”正如上面提到的.json文件MJ，需要在td标签中显示obj1、obj2、obj3。如何更改它。。？

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