Вложенный массив объектов Json в таблицу

У меня есть json-файл, есть массив объектов. В первом объекте находится второй массив с +/- 200 объектами. Есть ли возможность показать второй массив в новой таблице в последней строке первой таблицы?Вложенный массив объектов Json в таблицу

Как видно здесь, должно быть вложенная таблица в колонке: "Друзья"

http://jsfiddle.net/TqbMC/

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

источник

2013-09-24 Daan Goumans

вы можете получить доступ к внутренней информации таким образом: myList [0] .friends.data [i] .id и myList [0] .друзья.data [i] .name, просто перебирайте до тех пор, пока не будет достигнут myList [0] .friends.data.length и не построит структура, которую вы хотите - например, создать таблицу строк для каждого frien d с двумя td - один для id и один для имени – magyar1984

Спасибо! это очень помогло мне! http://jsfiddle.net/6v8Ew/1/ –

вы можете получить доступ к внутренним данным следующим образом: myList [0] .friends.data [i] .id и myList [0] .друзья.data [i] .name, просто перейдите к myList [0] .friends .data.length достигается и построить то, что структура вы хотите - например, создать строку таблицы для каждого друга с двумя тд - один для ид и один для имени - 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)); 
}

источник

2013-10-23 21:34:12

Вложенный массив объектов Json в таблицу

ответ

Смежные вопросы