如何将此 JSON 数据循环到表中？答案

【问题标题】：How to loop this JSON data into a table?如何将此 JSON 数据循环到表中？
【发布时间】：2016-06-22 11:49:18
【问题描述】：

我有这个 json 数据：

{
    "particles": {
        "name": "particles",
        "values": [
            ["35.5", 1466588408869],
            ["35.5", 1466589538531],
            ["45.5", 1466589577084]
        ]
    },
    "timestamps": {
        "name": "timestamps",
        "values": [
            ["144500", 1466588408870],
            ["144500", 1466589538531],
            ["144500", 1466589577084]
        ]
    }
}

如何将其循环到下表中？

<table>
  <tr>
    <th>particles</th>
    <th>timestamps</th>
  </tr>
  <tr>
    <td>35.5</td>
    <td>144500</td>
  </tr>
  <tr>
    <td>35.5</td>
    <td>144500</td>
  </tr>
  <tr>
    <td>45.5</td>
    <td>144500</td>
  </tr>
</table>

我的尝试：

div.table-responsive
    table.table.table-hover.table-bordered
        thead
            tr
                each variable, i in dataset.data
                    if variable.name
                        th.text-center #{variable.name}
        tbody
            tr
                each variable, i in dataset.data
                    if variable.values
                        td
                            each value, i in variable.values
                                p=  value[0]

结果（不好）：

    <table class="table table-hover table-bordered">
         <thead>
            <tr>
               <th class="text-center">particles</th>
                <th class="text-center">timestamps</th>
            </tr>
         </thead>
   <tbody>
       <tr>
          <td><p>35.5</p><p>35.5</p><p>45.5</p></td>
          <td><p>144500</p><p>144500</p><p>144500</p></td>
       </tr>
   </tbody>
   </table>

有什么想法吗？

【问题讨论】：

我们可以用jquery解决吗？
也许吧。为什么不:-)

标签： javascript html pug template-engine

【解决方案1】：

我想这很脏，但这里可能是一个答案的开始......总比没有好。

你可以从中受孕：

var data = {
    "particles": {
        "name": "particles",
        "values": [
            ["35.5", 1466588408869],
            ["35.5", 1466589538531],
            ["45.5", 1466589577084]
        ]
    },
    "timestamps": {
        "name": "timestamps",
        "values": [
            ["144500", 1466588408870],
            ["144500", 1466589538531],
            ["144500", 1466589577084]
        ]
    }
};

var titles = [];
var append = "";

$.each(data, function(i, e) {
  titles.push(e.name);
});

append += "<tr>";
$.each(titles, function(i, title) {
  append += "<th>" + title + "</th>";
});
append += "</tr>";

$.each(data[titles[0]].values, function(i, e) {
  append += "<tr>";
  $.each(titles, function(o, title) {
    append += "<td>" + data[title].values[i][0] + "</td>";
  });
  append += "</tr>";
});

$("#result").append(append);

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

【讨论】：

感谢您的回答。我已按照您的答案的模式编写了玉解决方案。请参阅下面的答案。谢谢！ :-)

【解决方案2】：

我不是 Javascript/JQuery 方面的专家，但我自己制定了解决方案，当然有更好的方法，但根据我的回答和其他答案，也许您可以制定自己的解决方案。

有我的：

var obj = {
    "particles": {
        "name": "particles",
        "values": [
            ["35.5", 1466588408869],
            ["35.5", 1466589538531],
            ["45.5", 1466589577084]
        ]
    },
    "timestamps": {
        "name": "timestamps",
        "values": [
            ["144500", 1466588408870],
            ["144500", 1466589538531],
            ["144500", 1466589577084]
        ]
    }
}

var table_length = 0;
var y = {};
for (var i in obj) {
   y = obj[i];
   break;
}

table_length = y.values.length+1;

for (var j=0 ; j < table_length; j++) {
$("table").append("<tr></tr>");
}

for (var i in obj) {
   $("table tr:first").append("<th>"+obj[i].name+"</th>");
   var x = 1;
   for (var j in obj[i].values) {
      $('table tr').eq(x).append("<td>"+obj[i].values[j][0]+"</td>");
      x++;
   }
}

现场演示JSFiddle

【讨论】：

感谢您的回答。我已按照您的答案的模式编写了玉解决方案。请参阅下面的答案。谢谢！ :-)

【解决方案3】：

用 Jase 回答：

table.table.table-hover.table-bordered
    thead
        tr
            each variable, i in dataset.data
                if variable.name
                    th.text-center #{variable.name}
    tbody
        - var data = dataset.data;
        - var titles = [];
        - for (var property in data) titles.push(property)

        =JSON.stringify(data)

        each value, i in data[titles[0]].values
            tr
                each title, x in titles
                    td= data[title].values[i][0]

什么鬼！

【讨论】：