jquery вмъкнете данни в следващия ред - javascript, jquery, html

Показвам данни в таблицата, както е показано по-долу

{"headers": [u"first",
u"last",
u"age"],
"values": [[u"sam",u"tom", 31]]}

използвайки jquery като

jQuery.each(data, function(index, value) {
var tr = $("<tr/>");
for (var i = 0; i<value.length; i++){
if (index=="headers"){
tr.append("<th>" + value[i] + "</th>");
}
else{
for (var j = 0; j<value[i].length; j++){
tr.append("<td>" + value[i][j] + "</td>");
}
}
}

$("#table1").append(tr);
});

И се показва правилно със заглавен ред и първи ред. Но когато имам данни с 2 стойности, изброявам като

 "values": [[u"sam", u"tom", 31],
[u"dean", u"tom", 28]]

по-скоро, че създавайки втори ред, той показва цели 6 стойности в един ред. Как мога да накарам втори списък да се покаже в следващия ред?

Отговори:

Искате да добавите нов ред за всеки масив в values:

var data = {
"headers": ["first","last","age"],
"values": [
["sam","tom", 31],
["johnny","walker", 69]
]
}
$.each(data, function(index, value) {
if (index == "headers") {
let tr = $("<tr />");
$.each(value, function(k, v){
tr.append("<th>" + v + "</th>");
})
$("#table1").append(tr);
} else {
$.each(value, function(i,row) {
let tr = $("<tr />");
$.each(row, function(k, v){
tr.append("<td>" + v + "</td>");
})
$("#table1").append(tr);
});
}
});

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

<table id="table1"></table>

Затваряте редовете си, преди да добавите нещо към тях <tr/>

Опитайте тази:

jQuery.each(data, function(index, value) {
var tr = $("<tr>");
for (var i = 0; i<value.length; i++){
if (index=="headers"){
tr.append("<th>" + value[i] + "</th>");
}
else{
for (var j = 0; j<value[i].length; j++){
tr.append("<td>" + value[i][j] + "</td>");
}
tr.append("</tr><tr>");
}
}
tr.append("</tr>");
$("#table1").append(tr);
});