使用多维 JSON 填充表的有效方法答案

【问题标题】：Efficient way to Populate Table with multidimensional JSON使用多维 JSON 填充表的有效方法
【发布时间】：2015-07-27 00:40:42
【问题描述】：

我正在寻找转换此 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"
   }
}

进入下表：

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

我的页面包含一个 html 表格，并且 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 并使用数据填充表的最快方法。我首先将 JSON 展平，然后通过循环将其提供给表格。然而，我为扁平化 JSON 而修改的代码非常缓慢。这是我第一次使用版本控制和 javascript，我显然没有正确提交我的代码。我正在寻找填充这张表格的最有效方法，但我自己被困住了，所以有人可以告诉我最有效的方法吗？

【问题讨论】：

在实际用例中您要处理多少行？您必须竭尽全力才能使 12 个元素的循环变慢。您能提供您已经尝试过的解决方案吗？
你控制服务器的源输出吗？这种结构可以大大改善。还要始终提供您在代码中尝试的内容...不管它是否运行良好...否则它会让您看起来希望有人为您完成所有工作，而您将被忽略并被否决
关于lost my code 的借口在这里闻起来很糟糕......看起来更像是一个家庭作业问题......而借口听起来像the dog ate my homework
对不起，我是新手，我不知道不提供自己的解决方案被认为是不好的做法。 @charlietfl 我无法控制服务器的输出。

标签： javascript jquery json html-table

【解决方案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 结构相当奇怪。您周围有数组，其中只有一个条目。

【讨论】：

@gibberish: 不用提琴，答案中有一个 Stack Snippet。

【解决方案2】：

为什么不改用Datables？您将承担从肩上抬起桌子的大部分负担。

【讨论】：