javascript - 在 jquery.html() 中循环 json 对象时出现问题

Question

我有一个 json 文件，我想循环遍历项目并显示它，

我的代码是:

$('.btn-refresh').on('click',function(){
  //start ajax request
  $.ajax({
      url: "April.json",
      dataType: "json",
      success: function(data) {
        $("#resultSet").append("<h3> " + data.currentMonth.toUpperCase() +" 2017</h3>" +
          "<table><tbody><tr><th>DATE</th><th>SUMMARY</th></tr>  " +
          for(date in data.days){
            "<tr><td rowspan='2' class='day_collapse'><a href='#'> "+ data.currentMonth +" </a></td></tr> " +
            "<tr ><td> "+
              "<table class='time_stamp_display'>" +
                "<tbody><tr><th> TIME </th><th> RESULT </th></tr> <tr>" + 
                  "<td> 06:00 am </td> " + 
                  "<td> SUCCESS </td> " + 
                  "</tr>  </tbody></table></td></tr> "+ 
                }
                  "</tbody></table>");
      },
      error: function(xhr){
        console.log("An error occured: " + xhr.status + " " + xhr.statusText);
      }
  });

});

四月.json

{"currentMonth":"April","days":{"7":{"timeOfExecution":"18:15","summaryForTheDay":{"Message":"Successful!!! GPS Location received","latency":106,"isSuccess":true,"18:20":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"18:23":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false}}},"10":{"timeOfExecution":"11:09","summaryForTheDay":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false,"11:20":{"Message":"Successful!!! GPS Location received","latency":103,"isSuccess":true},"11:23":{"Message":"Successful!!! GPS Location received","latency":108,"isSuccess":true},"10:09":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"10:20":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"10:51":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:09":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:12":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:22":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:28":{"Message":"Successful!!! GPS Location received","latency":107,"isSuccess":true}}}}}

for 循环不起作用，建议一个在 html 中填充数据的解决方案。

Answer 1

你一厢情愿的想法:)

• 不能在串联中循环。
• 您不能附加半个表格
• 你的 body 里不应该有 TH

这是您需要的循环，用于创建有效的 HTML

var data = {"currentMonth":"April","days":{"7":{"timeOfExecution":"18:15","summaryForTheDay":{"Message":"Successful!!! GPS Location received","latency":106,"isSuccess":true,"18:20":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"18:23":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false}}},"10":{"timeOfExecution":"11:09","summaryForTheDay":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false,"11:20":{"Message":"Successful!!! GPS Location received","latency":103,"isSuccess":true},"11:23":{"Message":"Successful!!! GPS Location received","latency":108,"isSuccess":true},"10:09":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"10:20":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"10:51":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:09":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:12":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:22":{"Message":"Failure!!! GPS Location not received","latency":0,"isSuccess":false},"11:28":{"Message":"Successful!!! GPS Location received","latency":107,"isSuccess":true}}}}}


var $res = $("#resultSet").html("");
$res.append("<h3> " + data.currentMonth.toUpperCase() + " 2017</h3>")
var $tab = $("<table><thead><tr><th>DATE</th><th>SUMMARY</th></tr></thead><tbody></tbody>");
var $tbod = $("tbody",$tab);
for (date in data.days) {
  $tbod.append("<tr><td rowspan='2' class='day_collapse'><a href='#'> " + data.currentMonth + " </a></td></tr> " +
    "<tr ><td> " +
    "<table class='time_stamp_display'>" +
    "<thead><tr><th> TIME </th><th> RESULT </th></tr></thead><tbody><tr>" +
    "<td> 06:00 am </td> " +
    "<td> SUCCESS </td> " +
    "</tr></tbody></table></td></tr> ");
}
$res.append($tab);

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