如何使用javascript顯示JSON數組數據？

Question

我有一個AJAX返回這樣的JSON數組數據，

[{ 
    "UserName": "John", 
    "Total": "45", 
    "Correct(%)": "71.1111", 
    "Incorrect(%)": "28.8889" 
}, { 
    "UserName": "KKK", 
    "Total": "42", 
    "Correct(%)": "47.6190", 
    "Incorrect(%)": "52.3810" 
}, { 
    "UserName": "AAA", 
    "Total": "54", 
    "Correct(%)": "81.4815", 
    "Incorrect(%)": "18.5185" 
}, { 
    "UserName": "BBB", 
    "Total": "39", 
    "Correct(%)": "58.9744", 
    "Incorrect(%)": "41.0256" 
}] 

我想通過使用JavaScript這樣的證明數據，

用戶名：約翰總計：45正確（％）：71.1111
不正確（％）：28.8889

用戶名：KKK總數：42正確（％）：47.6190
不正確（％）：52.3810

用戶名：AAA總數：54正確（％）：81.4815
不正確（％）：18.5185

用戶名：BBB總數：39正確（％）：58.9744
不正確（％）：41.0256

所以，我嘗試這樣，

$.ajax({ 
       url: 'some.php', 
       type: 'post', 
       data: {dept:d}, 
       dataType: 'json', 
       success: function(data) { 
        console.log("success"); 
        var temp = ""; 
        if(data && data!="") { 
         for(var i=0; i<data.length; i++) { 
          $.each(data,function(k,v){ 
           $.each(v,function(k,s){ 
            temp +=k+': <b>'+s+'</b> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'; 
           }); 
           temp +="<br/><br/>"; 
           console.log(temp); 
          }); 
         } 

         document.getElementById('user').innerHTML= temp; 
        } 
}); 

但是，我爲每個用戶五成一線。循環時我錯了。那麼，我該怎麼做？

Answer 1

嘗試刪除for循環。

//for(var i=0; i<data.length; i++) { 
    $.each(data,function(k,v){ 
     $.each(v,function(k,s){ 
      temp +=k+': <b>'+s+'</b> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'; 
     }); 
     temp +="<br/><br/>"; 
     console.log(temp); 
    }); 
//} 

Answer 2

你只需要使用1 $ .each循環，否則你會遍歷所有的數據多次。

Answer 3

使用此代碼：

$.ajax({ 
    url: 'some.php', 
    type: 'post', 
    data: {dept:d}, 
    dataType: 'json', 
    success: function(data) { 
     console.log("success"); 
     var temp = ''; 
     if(data && data != "") { 
      var temp = '<ul>'; 
      for(var i = 0; i < data.length; i++) { 
       temp += '<li>UserName: ' + data[i]['UserName'] + '&nbsp;Total: ' + data[i]['Total'] + '&nbsp;Correct(%): ' + data[i]['Correct(%)'] + '&nbsp;Incorrect(%): ' + data[i]['Incorrect(%)'] + '</li>'; 
      } 
      temp += '</ul>'; 

      document.getElementById('user').innerHTML = temp; 
     } 
    } 
});