无法让 getJSON 显示数组中的值

Question

我无法显示$.getJSON 呼叫的内容。我有这段代码可以从页面中检索一些 JSON 数据。

var loadItems = function() {
if (hasNextPage === false) {
    return false
}
pageNum = pageNum + 1;
var url = baseUrl + "json/" + pageNum + '/';
var jqxhr = $.getJSON(url, function (data) {
    var a = [];
    $.each(data.itemList, function (item) {
            a.push("<li>" + item.title + "</li>");

    });
    $("<ul/>", {html: a.join(" ")}).appendTo("#anchor");

});
jqxhr.complete(function () { alert('done!'); $(window).bind('scroll', loadOnScroll); });
};

这个想法只是根据滚动位置动态加载页面，并获取该页面的 JSON 内容（用于无限滚动效果）。 JSON 结构是这样的：

{ "key1": val1, "key2": val2, "itemList": [ {"title": "title", "author": "author", "id": 100, "slug": slug, }, ... ] }

重要的值在 itemList 中，我必须在其中检索将插入到我的 django 模板中的数据，然后从视图中获取一些数据。一切似乎都很好，除了我无法访问 itemList 中的数据。似乎没有任何东西被推入阵列。因为页面上没有显示任何内容（即应该创建的<li>）。这似乎是基本 ajax 移动的简单实现，但它不起作用。

编辑：

我做了一些错误跟踪，发现代码从不执行 $.each 循环。不知道如何解决这个问题。

Answer 1

您应该使用错误日志来检查出了什么问题：并且始终使用$.each 中的 index,obj 格式以确保安全。

 $.getJSON(url).success( function( data ) {
                    console.log(data);
    $.each(data.itemList, function (index, item) {
    a.push("<li>" + item.title + "</li>");
   });
    $("<ul/>", {html: a.join(" ")}).appendTo("#anchor");

                }).error(function(error){
                    console.log(error);// see if you are getting in error log..
                });

而且你的 json 数据也是错误的，应该是这样的：

{ "key1": "val1",
 "key2": "val2",
 "itemList": 
[
 {
"title": "title", "author": "author", "id": 100, "slug": "slug" 
},....... 
]

 }

尝试使用更正的数据，它会起作用。 你可以在这里查看你的数据：http://json.parser.online.fr/

Answer 2

我在您使用时看到了您代码中的问题

 $.each() //It should using for dictionary.

所以我有两个解决方案给你

1) 你可以使用 forEach 方法。

例如：

`if(data != null && data.itemList.length > 0)
{
    data.itemList.forEach(function (item) {
                       a.push("<li>" + item.title + "</li>");
                       });
}` 

==> 这种方式适用于 IE 10+ 和其他浏览器。

2) 使用 $.each 方法

例如：

if(data != null && data.itemList.length > 0)
{
   $.each(data.itemList, function (key, item) {
            a.push("<li>" + item.title + "</li>");
    });
}

==> 你的 Json 数据是字典类型，所以如果你使用 $.each 你需要定义两个变量

key: is the key of data.
item: is the value of data.

注意：这种方式适用于所有浏览器版本。

希望对你有帮助。

Answer 3

这是因为您的“项目”是一个索引，而不是您想要的“对象”。你必须使用第二个参数：

$.each(data.itemList, function (index, item) {
        a.push("<li>" + item.title + "</li>");
});

另外，hasNextPage 是在哪里定义的？定义了吗？您也可以将其缩短为：

if (!hasNextPage) return;