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

});

April.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

你有一厢情愿的想法：）

你不能循环连接。
你不能追加半张桌子
你不应该有T in

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你必须把你的循环写在append之外并添加而不是将值附加到div。

$('.btn-refresh').on('click',function(){
  //start ajax request
  $.ajax({
      url: "april.josn",
      dataType: "json",
      success: function(data) {

          var $table = "<h3> " + data.currentMonth.toUpperCase() + " 2017</h3>" +
  "<table><tbody><tr><th>DATE</th><th>SUMMARY</th></tr>";

for (date in data.days) {
  $table+="<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> ";
}
$table+="</tbody></table>"
console.log($table)

        $("#resultSet").append($table);
      },
      error: function(xhr){
        console.log("An error occured: " + xhr.status + " " + xhr.statusText);
      }
  });

});

在jquery.html（）中循环遍历json对象的问题

2 个答案: