使用多维 JSON 填充 Table 的有效方法

Question

我正在寻找最有效的方法来转换此 json。

{  
   "Kitchen":{  
      "protocol":[  
         "pollin"
      ],
      "id":[  
         {  
            "systemcode":31,
            "unitcode":1
         }
      ],
      "state":"off"
   },
   "BBQ":{  
      "protocol":[  
         "pollin"
      ],
      "id":[  
         {  
            "systemcode":31,
            "unitcode":4
         }
      ],
      "state":"off"
   },
   "Server":{  
      "protocol":[  
         "pollin"
      ],
      "id":[  
         {  
            "systemcode":15,
            "unitcode":1
         }
      ],
      "state":"off"
   }
}

进入以下table:

[Name]   [Protocol] [Systemcode] [S] [State]
Kitchen   pollin     31           1          off
BBQ       pollin     31           4          off
Server    pollin     15           1          off

我的页面包含 html 中的 table，并且 jquery 已加载。

<table class="table" id="tableDevices">
    <thead>
    <tr>
        <th>Name</th>
        <th>Protocol</th>
        <th>Systemcode</th>
        <th>Unitcode</th>
        <th>State</th>
    </tr>
    </thead>
</table>

现在我正在寻找遍历 JSON 并用数据填充 table 的最快方法。我先把JSON压平，然后循环喂给table。然而，我修改的用来压平 JSON 的代码非常慢。这是我第一次使用版本控制和 javascript，我显然没有正确提交我的代码。我正在寻找最有效的方法来填充这个 table 但我自己被困住了所以有人可以告诉我最有效的方法来做到这一点吗？

Answer 1

我假设您已经解析了 JSON 并且有一个变量 data，它引用了解析的结果。

然后是一个简单的for-in循环：

var tbody = $("<tbody>");
var key, entry, tr;
for (key in data) {
    entry = data[key];
    tr = $("<tr>");
    $("<td>").text(key).appendTo(tr);
    $("<td>").text(entry.protocol[0]).appendTo(tr);
    $("<td>").text(entry.id[0].systemcode).appendTo(tr);
    $("<td>").text(entry.id[0].unitcode).appendTo(tr);
    $("<td>").text(entry.state).appendTo(tr);
    tr.appendTo(tbody);
}
tbody.appendTo("#tableDevices");

也就是说，您可以改用像 Handlebars 这样的模板库。

实例：

// This stands in for the parsed JSON
var data = {
  "Kitchen": {
    "protocol": [
      "pollin"
    ],
    "id": [{
      "systemcode": 31,
      "unitcode": 1
    }],
    "state": "off"
  },
  "BBQ": {
    "protocol": [
      "pollin"
    ],
    "id": [{
      "systemcode": 31,
      "unitcode": 4
    }],
    "state": "off"
  },
  "Server": {
    "protocol": [
      "pollin"
    ],
    "id": [{
      "systemcode": 15,
      "unitcode": 1
    }],
    "state": "off"
  }
};

var tbody = $("<tbody>");
var key, entry, tr;
for (key in data) {
  entry = data[key];
  tr = $("<tr>");
  $("<td>").text(key).appendTo(tr);
  $("<td>").text(entry.protocol[0]).appendTo(tr);
  $("<td>").text(entry.id[0].systemcode).appendTo(tr);
  $("<td>").text(entry.id[0].unitcode).appendTo(tr);
  $("<td>").text(entry.state).appendTo(tr);
  tr.appendTo(tbody);
}
tbody.appendTo("#tableDevices");

<table class="table" id="tableDevices">
  <thead>
    <tr>
      <th>Name</th>
      <th>Protocol</th>
      <th>Systemcode</th>
      <th>Unitcode</th>
      <th>State</th>
    </tr>
  </thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意 JSON 结构相当奇怪。你周围有数组，其中只有一个条目。

Answer 2

为什么不使用 Datables 呢？填充 table 的大部分负担将从您的肩上卸下。

使用多维 JSON 填充 Table 的有效方法

Efficient way to Populate Table with multidimensional JSON

javascript

jquery

json

html-table