Question

过去两个月以来，我一直在通过JSON数据处理动态HTML表格，而且它一直很好用。然而，我用来制作表格的唯一代码使用数组项来通过{"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" } ] }创建一行，这对于我到目前为止所做的事情来说很好，但现在我还需要其他的东西。

例如，在更多数据中，我有以下JSON：

.forEach()

而不是制作一个看起来像的表：

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

我不能使用i < 3因为我无法指定我只想要三列（除非我这样做，而我根本看不出怎样）。我想我可能不得不使用常规for循环，并执行类似name之类的操作，但老实说，我无法想到在循环数据方面这是有意义的。< / p>

这有可能吗？非常感谢任何帮助。

编辑：完整的JSON是https://firebase.google.com/docs/reference/android/com/google/firebase/FirebaseNetworkException（超过3项）。基本上我想创建一个包含此数组中每个项目的表，每三个项目一行，但它也不应列出每个项目的每个键（仅id，attribute，{{ 1}}）。

Answer 1

您可以使用带有数组索引的模数运算符来创建每三个项目的新TR，否则将新TD添加到前一个TR。

＆＃13;

 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));
});

＆＃13;

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

＆＃13;

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>代替<table>的替代方法。每行的单元格数使用内部<div>的宽度指定。

＆＃13;

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))
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这是我的看法 - 鉴于您遇到的非常具体的情况，我更倾向于规范化数据，以便更方便地进行工作或扩展。我更喜欢这种方法，因为在我们添加tr和td标签的循环中，它看起来更流线化，就像表格行和单元格在语义上的结构一样。

columnNames

new DefaultTableModel(null,columnNames)

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;

希望它能激发灵感！

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

3 个答案: