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"
   }
}

进入下表：

[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，我显然没有正确地提交我的代码。我正在寻找最有效的方式来填补这张桌子而且我已经陷入困境，所以有人能够展示我最有效的方法吗？

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呢？你将承担从肩膀上抬起桌子的大部分负担。

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

2 个答案: