jQuery JSON .each problem

Question

I have a JSON object that looks like this.

[
{
"id" : "23", "event_id" : "0", "sport_title" : null, "event_title" : null, "title" : "Under 1 day!", 
"content" : "It\\'s all hotting up and battle commences in under one day!", "link" : ""
},

{
"id" : "20", "event_id" : "0", "sport_title" : null, "event_title" : null, "title" : "Getting Exciting", 
"content" : "Less than two days till it all kicks off, with cricket....", "link" : ""
}]

and I am trying to get the details out of this JSON Object and prepend them to a <ul>

the code that I am currently trying looks like this and is having problems

var writeup_list = writeuplist;

$.getJSON('../json/getWriteups.json', function(data) {

    $.each(data.items, function(i, item) {
        writeup_list.html(function() {
            var output;
            output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
            if(item.sport_title != null) {
                output += item.sport_title + ' - ';
            }
            output += item.title + '</a></li>';

            return output;
        });
    });

});

writeuplist is just the ul object.

I am also worried about overriding information that is already in the list or just adding again. Don't want to keep adding the same data. What is a good way to avoid this?

I seem to be having a problem in getting the data out of the JSON file I believe it has something to do with the way am trying to access it in the .each function.

Can anyone spot where am going wrong?

Answer 1

I believe you should use:

$(data.items).each(function(i, item) {

But you can also use a standard javascript loop which does the same thing:

for (var i = 0; i < data.items.length; i++) {
    var item = data.items[i];

Also, you don't want to use .html() to set your lis since that will overwrite the html already in place. Use .append() instead:

var output;
output = '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
if(item.sport_title != null) {
    output += item.sport_title + ' - ';
}
output += item.title + '</a></li>';

writeup_list.append(output);

Answer 2

data.items should be data[0] Because your JSON is an array (size 1) with objects in it.

edit: sorry I misread the post.

Answer 3

jQuery.getJSON('../json/getWriteups.json', function(data) {
    var output = '';

    jQuery.each(data.items, function (index, item) {
      output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';

      if (typeof item.sport_title == "string") {
        output += item.sport_title + ' - ';
      }

      output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});

Some things to note:

1. Are you sure data.items is the correct way of accessing your array? (try doing alert(data.items) in the callback, and make sure you see [object Array]).
2. Are you sure item.sport_title will be null? I changed it to check its a string...
3. It's quicker to build a string of the list elements as you go along, then add it to the DOM at the end, than it is to add the elements to the DOM as you go.
4. Doing element.html(str) will replace the current contents. Your sample was replacing the current html with each iteration, so at the end, you'd only have the contents of the last list element in your list.

Answer 4

First of all, instead of data.items, you should just use data. In your case the data returned is an array, so you want to iterate over that.

Second, the way your code is written, it will keep overwriting the contents of writeup_list. Instead, build up the html string and then set it at the end:

$.getJSON('../json/getWriteups.json', function(data) {
    var output = '';    
    $.each(data, function(i, item) {
        output += '<li><a href="/writeups/index.php#writeup_' + item.id + '">';
        if(item.sport_title != null) {
            output += item.sport_title + ' - ';
        }
        output += item.title + '</a></li>';
    });

    writeup_list.html(output);
});