Javascript 从json到ul li_Javascript_Jquery_Html_Arrays_Json

Javascript 从json到ul li

javascript jquery html arrays json

Javascript 从json到ul li,javascript,jquery,html,arrays,json,Javascript,Jquery,Html,Arrays,Json,我正在尝试将json解析为ul-li。以下是我的json： var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","

我正在尝试将json解析为ul-li。以下是我的json：

var data = {"resultDescription":"SUCCESS","data":[{"orderNum":"A000","userName":"Oswaldo","value":504.74,"qty":3.0},{"orderNum":"A001","userName":"Mao","value":529.17,"qty":6.0},{"orderNum":"A002","userName":"Angeline","value":553.6,"qty":9.0},{"orderNum":"A003","userName":"Gerardo","value":578.03,"qty":12.0},{"orderNum":"A004","userName":"Nicki","value":602.46,"qty":15.0}]}

我试着用这个代码来解析它：

$.each(data.data, function (index, item) {
                html += "<ul>";
                console.log(item);
                $.each(item.data, function (index1, item1) {
                    html += "<li>" + orderNum + "</li>";
                    html += "<li>" + qty + "</li>";
                    html += "<li>" + userName + "</li>";
                    html += "<li>" + value + "</li>";
                });
                html += "</ul>";
            });

$每个（数据、数据、函数（索引、项）{
html+=“”；
控制台日志（项目）；
$.each（item.data，function（index1，item1）{
html+=“”+orderNum+“”；
html+=“”+数量+“”；
html+=“”+用户名+“”；
html+=“”+value+“”；
});
html+=“”；
});

我做错了什么

示例如下

为什么您有一个额外的

$。每个
$.each(item.data, function (index1, item1) {

见下文。
演示：
var data={“resultDescription”：“SUCCESS”，“data”：[{“orderNum”：“a00”，“userName”：“Oswaldo”，“value”：504.74，“qty”：3.0}，{“orderNum”：“A001”，“userName”：“Mao”，“value”：529.17，“qty”：6.0}，{“orderNum”：“A002”，“userName”：“Angeline”，“value”：553.6，“qty”：9.0}，{“orderNum”：“A003”，“userName”：“Gerardo”，“value”：578.03，“qty”：12.0}，{“orderNum“Nicki”，“值”：602.46，“数量”：15.0}]}
var html=“”；
$.each（data.data，函数（索引，项）{
html+=“”；
控制台日志（项目）；
//$.each（item.data，function（index1，item1）{
html+=“”+item.orderNum+“”；
html+=“”+item.qty+“”；
html+=“”+item.userName+“”；
html+=“”+item.value+“”；
//});
html+=“”；
});
setTimeout（函数（）{
$（“.container”）.append（html）；
}，1500）；

var html=“”；
$.each（data.data，函数（索引，项）{
html+=“”；
控制台日志（项目）；
html+=“”+item.orderNum+“”；
html+=“”+item.qty+“”；
html+=“”+item.userName+“”；
html+=“”+item.value+“”；
html+=“”；
});
setTimeout（函数（）{
$（“.container”）.append（html）；
}, 1500);

试试这个

您已经从data
此处$获取了数据。每个（data.data，function（index，item）{
无需再次迭代。
删除第二个$。每个
和前面的项，如“item.ordernum”。请检查以下内容：
以下是更新的代码：
var html = "";
            $.each(data.data, function (index, item) {
                console.log(data.data)
                html += "<ul>";
                    html += "<li>" + item.orderNum + "</li>";
                    html += "<li>" + item.qty + "</li>";
                    html += "<li>" + item.userName + "</li>";
                    html += "<li>" + item.value + "</li>";
                html += "</ul>";
            });
            setTimeout(function() {
                $(".container").append(html);
            }, 1500);

var html=”“；
$.each（data.data，函数（索引，项）{
console.log（data.data）
html+=“”；
html+=“”+item.orderNum+“”；
html+=“”+item.qty+“”；
html+=“”+item.userName+“”；
html+=“”+item.value+“”；
html+=“”；
});
setTimeout（函数（）{
$（“.container”）.append（html）；
}, 1500);

我们要求您删除的原因是因为item.data
不包含任何内容，您可以在数组上应用$。每个数组上的项都是一个对象，因此您可以直接访问它。
以上回答是正确的。但是您可以使用jquery来构建html元素，而不是通过字符串连接来创建它
$.each(data.data, function (index, item) {
    var ul = $("<ul/>");
    var li = $("<li/>", { text: item.orderNum });
    ul.append(li);
    ul.append(li.clone().text(item.qty));
    ul.append(li.clone().text(item.userName));
    ul.append(li.clone().text(item.value));
    $(".container").append(ul);
});

$每个（数据、数据、函数（索引、项）{
var ul=$（“”）；
var li=$（“”，{text:item.orderNum}）；
ul.附加（li）；
ul.append（li.clone（）.text（item.qty））；
ul.append（li.clone（）.text（item.userName））；
ul.append（li.clone（）.text（item.value））；
$（“.container”）。附加（ul）；
});

我发现了两个错误

1-$。每个（项目.数据
应为$。每个（项目
内部循环

2-内部循环orderNum
应该是item1.orderNum
，下面的其他项也应该是相同的
        var html = "";
        $.each(data.data, function (index, item) {
            html += "<ul>";
            console.log(item);
            $.each(item, function (index1, item1) {
                html += "<li>" + item1.orderNum + "</li>";
                html += "<li>" + item1.qty + "</li>";
                html += "<li>" + item1.userName + "</li>";
                html += "<li>" + item1.value + "</li>";
            });
            html += "</ul>";
        });
        setTimeout(function() {
            $(".container").html(html);
        }, 1500);

var html=”“；
$.each（data.data，函数（索引，项）{
html+=“”；
控制台日志（项目）；
$。每个（项目，功能（索引1，项目1）{
html+=“”+item1.orderNum+””；
html+=“”+item1.qty+“”；
html+=“”+item1.userName+“”；
html+=“”+item1.value+“”；
});
html+=“”；
});
setTimeout（函数（）{
$（“.container”）.html（html）；
}, 1500);


        var html = "";
        $.each(data.data, function (index, item) {
            html += "<ul>";
            console.log(item);
            $.each(item, function (index1, item1) {
                html += "<li>" + item1.orderNum + "</li>";
                html += "<li>" + item1.qty + "</li>";
                html += "<li>" + item1.userName + "</li>";
                html += "<li>" + item1.value + "</li>";
            });
            html += "</ul>";
        });
        setTimeout(function() {
            $(".container").html(html);
        }, 1500);