从JSON到ul li

Question

我想将JSON解析为无序列表。这是我的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>";
            });

我做错了什么吗？

这里有一个JSFIDDLE的例子。

- user4121076

---

http://jsfiddle.net/2012qo9u/7/ - Shekhar Pankaj

Answer 1

为什么你有一个额外的 $.each？

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

See the below. Demo :

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}]}

var html = "";
   $.each(data.data, function (index, item) {
    html += "<ul>";
    console.log(item);
    //$.each(item.data, function (index1, item1) {
     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);

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

http://jsfiddle.net/kishoresahas/2012qo9u/1/

- Kishore Sahasranaman

Answer 2

以上答案是正确的。但是你可以使用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);
});

小提琴

- Anoop Joshi P

Answer 3

var html = "";
$.each(data.data, function (index, item) {
    html += "<ul>";
    console.log(item);
    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);

试试这个

演示

你已经从data这里获取了数据 $.each(data.data, function (index, item) { 不需要再进行另一个迭代。

- guradio

Answer 4

移除第二个$.each和前面的'item.ordernum'。请查看此Fiddle：

以下是更新后的代码：

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

我们要求您删除的原因是因为item.data为空，您可以在数组上应用$.each。此外，该项是一个对象，因此您可以直接访问它。

- Rohit Arora

Answer 5

我发现了2个错误
1- $.each(item.data 应该改为 $.each(item 内层循环
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);

http://jsfiddle.net/0sx1dob0/

- alamnaryab