使用 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 不敢单声道？ | 159 |微笑
即墨爱♡Mantan☆夏日生活 | 160 |纯的
Natsu no Owari no Amaoto ga | 161 |酷

这是我的代码所做的，我希望有一个表格，每 3 个项目生成 3 行，例如，它看起来像这样：

Manatsu wa 不敢单声道？ |即墨爱♡Mantan☆夏日生活 | Natsu no Owari no Amaoto ga
159 | 160 | 161
微笑 |纯 |酷

我不能为此使用.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>

希望它能激发灵感！