問題與jquery.html（）

Question

我有一個JSON文件I通過項笏循環，並顯示它通過內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

您從一廂情願的想法:)

• 挨你不能迴路串聯。
• 您不能追加半表
• 你不應該有TH在TBODY

以下是你需要的循環，創建有效的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>

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

});