如何使用 javascript 显示 JSON 数组数据？答案

【问题标题】：How to show JSON array data by using javascript?如何使用 javascript 显示 JSON 数组数据？
【发布时间】：2016-02-08 13:00:58
【问题描述】：

我有一个像这样返回 json 数组数据的 ajax，

[{
    "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 来显示该数据，

用户名：John 总数：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;
                    }
});

但是，我为每个用户设置了 5 行。循环时我错了。那么，我该怎么做呢？

【问题讨论】：

尝试删除for loop
非常感谢。现在好了。
@roullie 将其作为答案
@roullie 请发表您的评论以回答。
@NightMare 评论作出回答。 :)

标签： javascript php json

【解决方案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);
    });
 //}

【讨论】：

@NightMare 没问题。很高兴我能帮上忙。 :)

【解决方案2】：

使用此代码：

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

【讨论】：

谢谢。它的方式不同。

【解决方案3】：

您只需要使用 1 个 $.each 循环，否则您将循环所有数据多次。

【讨论】：