如何将此 JSON 数据循环到 table 中？

Question

我有这个 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 中？

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

有什么想法吗？

Answer 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>

Answer 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

Answer 3

日文答案：

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]

什么鬼！

如何将此 JSON 数据循环到 table 中？

How to loop this JSON data into a table?

html

javascript

template-engine

pug