jquery inserir dados na próxima linha - javascript, jquery, html

Estou exibindo dados na tabela como abaixo

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

usando jquery como

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

E é exibido corretamente com a linha do cabeçalho e a primeira linha. Mas quando eu tenho dados com 2 valores listamos como

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

ao invés de criar a segunda linha, ele exibe 6 valores inteiros em uma linha. Como a segunda lista pode ser exibida na próxima linha?

Respostas:

Você deseja adicionar uma nova linha para cada matriz em 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>

Você está fechando suas linhas antes de adicionar algo a elas com <tr/>

Tente isto:

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