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

遍历json对象并将其放在html表中

2 个答案: