循环遍历 json 对象并将其放入 html 表中

Question

我需要遍历 json 文件并将其输出到 html 表中。下面有一段代码，所以你会感觉到我需要做什么。 “数据”包含我通过 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");
}

Answer 1

您可以使用for var v in d 循环遍历字典的值 如果您需要键和值，请使用for (k,v) in d.items()

所以你的代码可以变成：

for var entry in value.Data {
    for var v in entry{
        items.push("<td id=''" + index + "''>" + v + "<br/>" + "</td>");
    }
    items.push("</tr>");
    items.push("<tr>");
}

Answer 2

您可以通过以下方式从对象数组生成表格

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