I have a json file, there is an array of objects. In the first object is a 2nd array with +/- 200 objects. Is there a possibility to show the 2nd array in a new table in the last row of the first table?
As seen here, there should be a nested table in the column: "Friends"
The html is:
<body onLoad="buildHtmlTable()">
<table id="excelDataTable" border="1">
</table>
</body>
The rest of the code is:
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;
}
(the data comes from the facebook graph api)
