使用JSON数据填充HTML表，每个数组对象获取一个单元格而不是一行

Question

过去两个月我一直在通过JSON数据处理动态HTML表格，并且它一直很好用。然而，我用来制作表格的唯一代码使用数组项来通过.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()，因为我无法指定我只想要三列（除非我这样做，我根本看不出怎么样）。我想我可能不得不使用常规的for循环，并做一些类似i < 3的事情，但老实说，我无法想到任何方式这对于按照我想要的方式循环数据是有意义的。

这有可能吗？任何帮助深表感谢。

编辑：完整的JSON是here（已超过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]获取密钥并将其用于行循环：

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>s而不是<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>

希望它激发灵感！