Json 嵌套对象数组到表答案

【问题标题】：Json Nested Object Array to TableJson 嵌套对象数组到表
【发布时间】：2013-09-29 11:58:05
【问题描述】：

我有一个 json 文件，里面有一个对象数组。在第一个对象中是带有 +/- 200 个对象的第二个数组。是否有可能在第一个表的最后一行的新表中显示第二个数组？

如此处所示，列中应该有一个嵌套表：“朋友”

html 是：

<body onLoad="buildHtmlTable()">
<table id="excelDataTable" border="1">
</table>
</body>

剩下的代码是：

var myList=[{
"id": "220439",
"name": "Bret Taylor",
"friends": {
  "data": [
     {
        "id": "100003461417780",
        "name": "Pedro Fernandes"
     },
     {
        "id": "100004448132997",
        "name": "Tatiane Rodrigues"
     },
     {
        "id": "100002608573875",
        "name": "Gerson Yoody"
     },
     {
        "id": "100003532942622",
        "name": "Brennen Roup"
     },
     {
        "id": "100003910478450",
        "name": "Maruxita Gomez"
     },
     {
        "id": "100003035179424",
        "name": "Ekta Vaghasia"
     },
     {
        "id": "100003034655176",
        "name": "Nikita Adam"
     },
     {
        "id": "100004269720826",
        "name": "Lukas Ks"
     },
     {
        "id": "100004489472386",
        "name": "Hong Finozaza"
     },
     {
        "id": "1436623789",
        "name": "Dianita M Ct"
     },
     {
        "id": "100004324535652",
        "name": "Ana Paula"
     },
     {
        "id": "100004433135086",
        "name": "Caroline Geovannini"
     },
     {
        "id": "100004081013147",
        "name": "Ryan Bispo Silva"
     },
     {
        "id": "1697844686",
        "name": "Louann Hyatt Clark"
     },
     {
        "id": "100003283377051",
        "name": "Ysabel Salazar"
     },
     {
        "id": "100003398360349",
        "name": "Ty SoHigh Walker"
     },
     {
        "id": "100001201489463",
        "name": "Dicu Andrei D"
     },
     {
        "id": "100001811128458",
        "name": "Cristy Torres Castellanos"
     },
     {
        "id": "1693121601",
        "name": "Jasim Amit"
     },
     {
        "id": "100001966217366",
        "name": "Candy Chhokar"
     },
     {
        "id": "100004096284395",
        "name": "Stefania Bilska"
     },
     {
        "id": "100004084157244",
        "name": "Papah Noval"
     },
     {
        "id": "1791202672",
        "name": "Bianca Agostina Gherardini"
     },
     {
        "id": "100000825894241",
        "name": "Usman Faiz"
     },
     {
        "id": "100002424916440",
        "name": "Muhammad Tajminur Rahman"
     }
  ],
  "paging": {
     "next": "https://graph.facebook.com/99394368305/likes?limit=25&after=MTAwMDAyNDI0OTE2NDQw"
  }
  }
  }];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
 var columns = addAllColumnHeaders(myList);

 for (var i = 0 ; i < myList.length ; i++) {
     var row$ = $('<tr/>');
     for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
         var cellValue = myList[i][columns[colIndex]];

         if (cellValue == null) { cellValue = ""; }

         row$.append($('<td/>').html(cellValue));
     }
     $("#excelDataTable").append(row$);
 }
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(myList)
 {

   var columnSet = [];
   var headerTr$ = $('<tr/>');

 for (var i = 0 ; i < myList.length ; i++) {
     var rowHash = myList[i];
     for (var key in rowHash) {
         if ($.inArray(key, columnSet) == -1){
             columnSet.push(key);
             headerTr$.append($('<th/>').html(key));
         }
     }
 }
 $("#excelDataTable").append(headerTr$);

 return columnSet;
 }

（数据来自facebook graph api）

【问题讨论】：

可以这样访问内部数据：myList[0].friends.data[i].id和myList[0].friends.data[i].name，一直迭代到myList[ 0].friends.data.length 达到并构建您想要的任何结构 - 例如，为每个朋友创建具有两个 td 的表行 - 一个用于 id，一个用于 name
谢谢！！这对我帮助很大！ jsfiddle.net/6v8Ew/1

标签： javascript json facebook object multidimensional-array

【解决方案1】：

您可以通过这种方式访问内部数据：myList[0].friends.data[i].id 和 myList[0].friends.data[i].name，只需迭代直到 myList[0].friends。达到 data.length 并构建您想要的任何结构 - 例如，为每个朋友创建表行，其中有两个 td - 一个用于 id，一个用于 name – magyar1984

http://jsfiddle.net/6v8Ew/1/

for (var x = 0 ; x < myList[0].friends.data.length ; x++){

                $line.append( $( "<td></td>" ).html( myList[0].friends.data[x].id ) );
}

【讨论】：