使用jQuery（AJAX）正确循环遍历多维JSON对象？

I've got a rather large JSON object that comes out looking like this:

我有一个相当大的JSON对象,看起来像这样:

[
    {
        "FoodNumber":"95809548",
        "FoodIdentification":"Food Name",
        "StockCode":"710",
        "Description":
        [
            "Blah blah blah",
            "More blah blah blah"
        ]
    },
    {
        "FoodNumber":"95892541",
        "FoodIdentification":"Another food name",
        "StockCode":"710",
        "Description":
        [
            "Food description here",
            "Additional description here"
        ]
    },
    {
        "FoodNumber":"97179370",
        "FoodIdentification":"Yet another food name",
        "StockCode":"602",
        "Description":[]
    },
    {
        "FoodNumber":"97270901",
        "FoodIdentification":"HEY",
        "StockCode":"602",
        "Description":[]
    }
]

As you can see, sometimes the description is empty, and sometimes it has more than one item. My current jQuery code is as follows:

如您所见,有时描述是空的,有时它有多个项目。我目前的jQuery代码如下:

        $("#SearchQueryButton").click(function () {
            $.ajax({
                url: "TestMe.aspx/PopulateMainTable",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    min: 1,
                    max: 25,
                    searchQuery: $("#SearchQueryTextbox").val()
                }),
                dataType: "json",
                beforeSend: function (html) {
                    $('#initial_results').html('');
                },
                success: function (html) {
                    //console.log(html);
                    $.each(html.d, function (i, obj) {
                        console.log(obj);
                    });
                    //$('#initial_results').append(html);
                }
            });
        });
    });

If I replace "console.log(obj);" with any of the following lines:

如果我替换“console.log(obj);”使用以下任何一行:

1) console.log(html[i].FoodNumber);
2) console.log(obj.FoodNumber);

I get the same exact error as if I were using console.log(obj);:

我得到了同样的确切错误,就好像我使用的是console.log(obj);:

Uncaught TypeError: Cannot use 'in' operator to search for '4579' in <insert giant blob of json here>

I've tried a JSON validator to determine if it was a valid blob, and it is. I'm using the exact same JSON blob as I listed above, but with the description text removed. How do I correctly parse this? It's a rather large JSON string, about 4.52 KB in size, and I'm having trouble parsing it so I can display it to the user.

我已经尝试过JSON验证器来确定它是否是一个有效的blob,它确实是。我正在使用与上面列出的完全相同的JSON blob,但删除了描述文本。我该如何正确解析这个?它是一个相当大的JSON字符串,大小约4.52 KB,我在解析它时遇到问题,因此我可以将其显示给用户。

Thanks!

2 个解决方案

#1

Finally, after debugging for a while, I found the solution to every problem I was having:

最后,经过一段时间的调试后,我找到了解决我遇到的每个问题的方法:

1) The string needs to be converted to json using $.parseJSON(z.d);

1)需要使用$ .parseJSON(z.d)将字符串转换为json;

var json = $.parseJSON(z.d);

2) I need "return false;" before the end of the function so it doesn't refresh and lose everything (note that initial_results is no longer an id, but a class).

2)我需要“回归假”;在函数结束之前,它不会刷新并丢失所有内容(请注意,initial_results不再是id,而是一个类)。

Now I have everything I need. Full code below:

现在我拥有了我需要的一切。完整代码如下:

        $("#SearchQueryButton").click(function () {
            $.ajax({
                url: "TestMe.aspx/PopulateMainTable",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    min: 1,
                    max: 25,
                    searchQuery: $("#SearchQueryTextbox").val()
                }),
                dataType: "json",
                beforeSend: function (html) {
                    $('.initial_results').html('');
                },
                success: function (z) {
                    var json = $.parseJSON(z.d);

                    $.each(json, function (i, obj) {
                        console.log(obj);
                    });
                },
                error: function(e)
                {
                    $('.initial_results').html("Error:" + e.toString());
                }
            });
            return false;
        });
    });

#2

In json you can simply use the this to access the property like so :

在json中你可以简单地使用它来访问属性,如下所示:

$.each(html.d, function () {
    console.log(this.FoodNumber);
});

Are you sure the array is in html.d ? We don't have the server side code here.

你确定数组是在html.d吗?我们这里没有服务器端代码。

#1