时间戳

首页 > 解决方案 > 了解将 JSON 对象循环到 HTML 表（排序和条件）

javascript - 了解将 JSON 对象循环到 HTML 表（排序和条件）

问题描述

我有很长的 JSON 数据，其中对象有点长，上面有一些编号。我应该做的是让 JSON 与 Head 一起表是每个对象的数量。

这是我所做的事情的快照（使用 JSON 数据）

jsfiddle 我做的循环是让thead和tbody像这样

$.each(Object.keys(myObj.data[0]), function(_, key) {

  tr.append("<th>" + key + "</th>");

});
tr.appendTo(thead);

$.each(myObj.data, function(_, obj) {
  tr = $("<tr />");
  $.each(obj, function(_, text) {

    if (!text.namashift) {
      tr.append("<td>" + text + "</td>")
    } else {
      tr.append("<td>" + text.namashift + "</td>")
    }

  });
  tr.appendTo(tbody);
});

这是我掌握和想要的，但有几个问题我做不到：

  1. 对 JSON 进行排序，我想要的是第一列的“id”“nama”“bulan”“tahun”thead，这是因为 JSON 是无序的？尽管在 JSON 列表中对象位于前面，但当成为表格时，它会位于后面。
  2. 使条件只有对象“nama”并且所有数字对象都出现在表格上（1-31）
  3. 如果某些 JSON 对象数组的编号不同怎么办（例如，一个数组是 1-30，另一个是 1-31。那么最后一列的 1-30 td 为空白）

这是我第一次处理这样的事情，我想在未来更多地了解 JSON。数组列表有点不同......同时我想要最有效的方法来做到这一点。我希望有人能给我Light，非常感谢。

标签： javascripthtmljqueryjson

解决方案

您的第一个选择是提供一个固定的表格，但是当您开始走数据驱动的路线时，让我们排除这种可能性。

固定表是在 HTML 中预定义表的位置，然后您向其中添加数据。

硬编码表是对数据进行假设的地方，例如它有 31 列。因此，您可以将循环编写为基本for循环：

for (var i=0;i<=31;i++) {  
    tr.append("<th>" + i + "</th>");

在上述两种情况下，如果您的数据发生变化（例如添加一列31），那么您需要更新 HTML。这就是我们编写数据驱动应用程序的原因（假设我们可以信任数据源......）

排序 JSON [列] - “id” “nama” “bulan” “tahun” thead 作为第一列

该答案在此处提供了详细信息。总之，首先显示“数字”键，然后显示字母键。

要按您想要的顺序获取它们，您可以更改数据，使其不是数字，例如从

[ { "2": { "shift": "9" ...

至

[ { "key2": { "shift": "9" ...

然后确保您的其他列在前面并调整您的代码以排除前缀。

假设您不想更改键，您可以更改thead循环，以便它首先找到 alpha 键（两个循环），例如：

let tr = $("<tr />");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (parseInt(key)) return;
  tr.append("<th>" + key + "</th>");
});
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  tr.append("<th>" + key + "</th>");
});
tr.appendTo(thead);

这里有点干，但只要tr.append不是太长，没有人应该抱怨。

您还需要更改 tbody 循环以使它们以正确的顺序排列

但是，当结合下一个要求时，就不需要上面的了，因为只有一个非数字标题

仅设置条件对象“nama”，所有数字对象都出现在表中 (1-31)。

在这种情况下，nama首先添加列，然后是数字列，使用与上述相同的条件，例如：

let tr = $("<tr />");
tr.append("<th>nama</th>");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  tr.append("<th>" + key + "</th>");
});
tr.appendTo(thead);

同样，这将需要更改数据循环 - 我们可以在下面简化。

如果某些 JSON 对象数组的编号不同怎么办（例如，一个数组是 1-30，另一个是 1-31。那么最后一列的 1-30 td 为空白）

在这种情况下，您应该首先解析列表以找到您感兴趣的所有键，然后在每个 tr 上创建相同的键。

在 data[0] 包含所有必需标头的简单形式中，它将是：

let cols = [];
cols.push("nama");
$.each(Object.keys(myObj.data[0]), function(_, key) {
  if (!parseInt(key)) return;
  cols.push(key);
});

但我们也希望获得其他列 - 在你的小提琴中，我从第一个数据中删除了“1”，并在第二个数据中添加了“33”以显示这些工作（缺少 32，所以它不在列中）

让列 = []; $.each(myObj.data, ( , data) => { $.each(Object.keys(data), function( , key) { if (!parseInt(key)) return; if (!cols.includes(key )) cols.push(key); }); }); // 这里使用数字排序 cols = cols.sort(function(a, b) { return a - b; }); // 在前面添加特定的列 cols.unshift("nama");

需要对它们进行排序以使最初丢失的“1”回到开头。

或者，您可以在这里得到一个最小值-最大值，它们都呈现在两者之间，这也将输出“32”。

然后通过循环列而不是数据键添加到表中

let tr = $("<tr />");
$.each(cols, (_,key) => tr.append("<th>" + key + "</th>") );
tr.appendTo(thead);

$.each(myObj.data, function(_, obj) {
  tr = $("<tr />");
  $.each(cols, (_,key) => {
     tr.append("<td>" 
               + (!obj[key] 
                     ? "" 
                     : (obj[key].namashift 
                          ? obj[key].namashift 
                          : obj[key])) 
               + "</td>") 
  });
  tr.appendTo(tbody);
});

Where!obj[key] ? ""检查缺失值，并且obj[key].namashift ?是您对 namashift 与 namashift 本身的数字键的原始检查。if / else为了您自己的清楚，您可以将其扩展为。

更新小提琴：https ://jsfiddle.net/rz26xabm/

或者，如果您可以更改 JSON，则添加一个“标题”行来描述如何构建表并在其上循环。

推荐阅读