使用JSON數據填充HTML表，每個數組對象獲取一個單元格而不是一行

Question

在過去的兩個月中，我一直在通過JSON數據來處理動態HTML表，而且效果一直很好。 但是，我一直用來制作表的唯一代碼使用數組項通過.forEach()來.forEach()一行，這對於到目前為止我一直在做的事情都很好，但是現在我還需要其他東西。

例如，在更多數據中，我具有以下JSON：

 {"songs":[
 {
     "name":"Manatsu wa Dare no Mono?",
     "id":159,
     "attribute":"smile",
  },
  {
     "name":"Jimo Ai♡Mantan☆Summer Life",
     "id":160,
     "attribute":"pure"
  },
  {
     "name":"Natsu no Owari no Amaoto ga",
     "id":161,
     "attribute":"cool"
  }
]
}

而不是制作如下表：

Manatsu wa Dare no Mono?    | 159 | smile
Jimo Ai♡Mantan☆Summer Life  | 160 | pure
Natsu no Owari no Amaoto ga | 161 | cool

這就是我的代碼的作用，例如，我希望有一個表，該表每3個項目產生3行，例如，它看起來像這樣：

Manatsu wa Dare no Mono? | Jimo Ai♡Mantan☆Summer Life | Natsu no Owari no Amaoto ga 
159                      | 160                        | 161
smile                    | pure                       | cool

我不能.forEach()使用.forEach() ，因為我無法指定僅需要三列（除非我這樣做，而且我完全看不到）。 我認為我可能必須使用常規的for循環，並執行類似i < 3但是老實說，我想不出任何以我想要的方式遍歷數據的方式。

這有可能嗎？ 任何幫助深表感謝。

編輯：完整的JSON在這里 （已超過3個項目）。 基本上，我想為該數組中的每個項目創建一個表，每三個項目一行，但它也不應該列出每個項目的每個鍵（僅name ， id和attribute ）。

Answer 1

您可以使用模數運算符和數組索引來執行此操作，以便每隔三項創建一個新的TR，否則將新的TD添加到上一個TR。

  var yourData = { "songs":[ { "name":"Manatsu wa Dare no Mono?", "id":159, "attribute":"smile", }, { "name":"Jimo Ai♡Mantan☆Summer Life", "id":160, "attribute":"pure" }, { "name":"Natsu no Owari no Amaoto ga", "id":161, "attribute":"cool" } ] }; var s = yourData.songs; var $tbody = $("#songs tbody"); var $tr; s.forEach(function (song, i) { // create a new TR for the first item and every three items after if (i % 3 == 0) { $tr = $('<tr>'); $tbody.append($tr); } $tr.append($("<td>").html(song.name + "<br>" + song.id + "<br>" + song.attribute)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='songs'> <tbody></tbody> </table> 

Answer 2

您可以從json.songs[0]獲取鍵， json.songs[0]其用於行循環：

var $tbody = $("#songs tbody");
Object.keys(json.songs[0]).forEach(key => {
  var cells = json.songs.map(song => $("<td>").text(song[key]));
  $tbody.append($("<tr>").append(cells));
});

編輯：這是使用<div>而不是<table>的另一種方法。 每行的單元格數量使用內部<div>的寬度指定。

 var json = { "songs": [{ "name": "Manatsu wa Dare no Mono?", "id": 159, "attribute": "smile", }, { "name": "Jimo Ai♡Mantan☆Summer Life", "id": 160, "attribute": "pure" }, { "name": "Natsu no Owari no Amaoto ga", "id": 161, "attribute": "cool" }, { "name": "Jimo Ai♡Mantan☆Summer Life", "id": 160, "attribute": "pure" }, { "name": "Natsu no Owari no Amaoto ga", "id": 161, "attribute": "cool" }] } var $songs = $("#songs"); var keys = ["name", "id", "attribute"]; json.songs.forEach((song, i) => { var text = keys.map(key => song[key]).join("<br>"); $songs.append($("<div>").html(text)) }); 

 #songs div { display: inline-block; width: 33.3%; padding: 10px; box-sizing: border-box; vertical-align: top; height: 6em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="songs"> </div> 

Answer 3

這是我的看法-考慮到您遇到的非常特殊的情況，我將更喜歡對數據進行規范化處理，以便更輕松地進行處理或擴展。 我更喜歡這種方法，因為在我們添加tr和td標簽的循環中，它“看起來更加精簡”，就像表行和單元格的語義結構一樣。

 var json = { "songs": [{ "name": "Manatsu wa Dare no Mono?", "id": 159, "attribute": "smile", }, { "name": "Jimo Ai♡Mantan☆Summer Life", "id": 160, "attribute": "pure" }, { "name": "Natsu no Owari no Amaoto ga", "id": 161, "attribute": "cool" }] } var aSongs = json.songs; var oSampleObjectStructure = aSongs[0]; //use the keys as sample var oNormalizedStructure = {}; var sTr = ''; //normalize data format for this specific needs. for (var sKey in oSampleObjectStructure) { oNormalizedStructure[sKey] = []; for (var i = 0; i < aSongs.length; i++) { oNormalizedStructure[sKey].push(aSongs[i][sKey]); } } console.log(oNormalizedStructure); //just to show you the normalized data structure //parse using the normalized data. for (var sKey in oNormalizedStructure) { sTr += '<tr>'; for (var i = 0; i < oNormalizedStructure[sKey].length; i++) { sTr += '<td>' + oNormalizedStructure[sKey][i] + '</td>'; } sTr += '</tr>'; } document.getElementById('theBody').innerHTML = sTr; 

 table { width: 100%; } td { border-right: solid 1px #ccc; } 

 <table> <tbody id="theBody"></tbody> </table> 

希望能激發靈感！