我需要循环遍历 json 文件并将其输出到 html 表中。下面有一段代码,这样你就会明白我需要做什么。 “data”包含我通过ajax调用获得的json对象。
我也尝试过 data.length 但没有运气,因为 json 对象没有在同一个文件中定义。
任何帮助将不胜感激。 谢谢。
$(data).each(function(index, value) {
items.push("<tr>");
items.push("<td id=''" + index + "''>" + value.Data[0].BoxIds + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].ID + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Name + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Address + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].ZIP + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].City + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Country + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Latitude + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Longitude + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].ArraySizeX + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].ArraySizeY + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].BoxLocations + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[0].Type + "</td>");
items.push("</tr>");
items.push("<tr>");
items.push("<td id=''" + index + "''>" + value.Data[1].BoxIds + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].ID + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Name + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Address + "<br/>" + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].ZIP + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].City + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Country + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Latitude + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Longitude + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].ArraySizeX + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].ArraySizeY + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].BoxLocations + "</td>");
items.push("<td id=''" + index + "''>" + value.Data[1].Type + "</td>");
items.push("</tr>");
//console.log(data);
//console.log(data.Data[0].Name);
});
$("<tbody/>", {
html: items.join("")
})
.appendTo("table");
}
最佳答案
您可以通过以下方式从对象数组生成表格
let data = [
{id: 1, name: 'anik', age: 29},
{id: 2, name: 'shojib', age: 50},
];
let table = '<thead><tr><th>id</th><th>name</th><th>age</th></tr></thead><tbody>';
data.forEach(function(d){
table += '<tr><td>'+d.id+'</td>';
table += '<td>'+d.name+'</td>';
table += '<td>'+d.age+'</td></tr>';
})
table += '</tbody>';
$('#mytable').empty().html(table);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" border=1 >
</table>
您的 ajax 调用应该类似于下面的代码。寻找成功部分
$.ajax({
url: '{{route('call.history.download')}}',
type: 'POST',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
start_date: $('#start_date').val(),
end_date: $('#end_date').val(),
type: $('#type').val()
},
success: function(response){
let data = response.Data;
let table = '<thead><tr><th>id</th> <th>name</th><th>age</th></tr></thead><tbody>';
data.forEach(function(d){
table += '<tr><td>'+d.id+'</td>';
table += '<td>'+d.name+'</td>';
table += '<td>'+d.age+'</td></tr>';
})
table += '</tbody>';
$('#mytable').empty().html(table);
}
});
关于javascript - 循环遍历json对象并将其放入html表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57767101/