Wie diese JSON-Daten in eine Tabelle zu loopen?

Question

Ich habe diese json Daten:

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

Wie kann ich Schleife darunter in Tabelle?

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

Mein Versuch:

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] 

Ergebnis (nicht gut):

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

Irgendwelche Ideen?

Answer 1

Ich denke, es ist schmutzig, aber hier vielleicht ein Anfang einer Antwort ... Es ist besser als nichts.

Sie können sich aus dieser imprägnieren:

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

Ich bin kein Profi in Javascript/JQuery, aber ich meine eigene Lösung zu machen, natürlich gibt es eine bessere Art und Weise, es zu tun , aber mit meiner Antwort und der anderen Antwort können Sie vielleicht Ihre eigene Lösung finden.

Es ist mein:

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++; 
    } 
} 

LIVE-DEMO JSFiddle

Answer 3

Antwort in 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] 

Was zum Teufel!