CODEWITHSUNDEEP
javascriptjqueryajaxjsondjango
nmac
nmac

Reputation: 680

Trouble getting getJSON to display values from array

I am having trouble displaying the contents of a $.getJSON call. I have this code which retrieves some JSON data from a page. 

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

The idea is just to load a page dynamically based on scroll position, and get the JSON contents of that page (for an infinite scroll effect). The JSON structure is something like this: 

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

The important values are in itemList, where I have to retrieve data that will get plugged into my django template, which in turn will get some data from the view. Everything seems to work just fine, except that I can't access the data in itemList. Nothing seems to get pushed into the array. because nothing gets displayed on the page (namely, the <li> that should be created). This seems to be a simple implementation of a basic ajax move, but its not working.

EDIT:

I've done some bug tracking and have found that the code never executes the $.each loop. Not sure how to resolve this though.

Upvotes: 0

Views: 99

Answers (3)

Suchit kumar
Suchit kumar

Reputation: 11869

you should be using error log to check what is going wrong:and always use index,obj format in $.each to be safe.

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

and your json data is also wrong it should be something like this:

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

 }

try with corrected data it will work. you can check your data here:http://json.parser.online.fr/

Upvotes: 1

Todd
Todd

Reputation: 5454

It's because your 'item' is an index, not an 'object' as you want. you have to use the second parameter:

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

also, where is hasNextPage defined? is it defined? you might also shorten that to:

if (!hasNextPage) return;

Upvotes: 0

Binh LE
Binh LE

Reputation: 377

I saw the problems in your code when you using 

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

So I have two solutions for you

1) You can use forEach method.

ex: 

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

==> This way will work for IE 10+, and the other browers.

2) Using the $.each method

ex: 

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

==> Your Json data is dictionary type, so if you use $.each you need to define two variable with

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

Note: this way will be worked for all browers version.

Hope this can helps you.

Upvotes: 0

Related Questions