How to loop this JSON data into a table?

Question

I have this json data:

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

How can I loop it into table below?

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

My attempt:

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]

Result (not good):

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

Any ideas?

Answer 1

I guess it's dirty but here maybe a beginning of an answer... It's better than nothing.

You can impregnate yourself from this:

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>