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>
  <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的专家，但是我自己做了解决方案，当然还有更好的方法，但是我的答案和其他答案，也许你可以自己制定解决方案。< / p>

有我的：

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

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

到底是怎么回事！

如何将这个JSON数据循环到表中？

3 个答案: