Question

I have a very basic json file that I am loading with jquery / javascript. Right now I am just trying to alert some of my data. The problem I am having is that I have 3 main items in my JSON file (called “category”), but for some reason you can only read the last one.

My JSON file looks like this:

{
"category":{
    "name":"Caribbean Travel",
    "article":{
        "id": "1",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }
},
"category":{
    "name":"European Travel",
    "article":{
        "id": "2",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }
},
"category":{
    "name":"U.S. Travel",
    "article":{
        "id": "3",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }
}

}

I call up the json file and alert some information like so:

$(document).ready(function(){
$.getJSON("news.json",
    function(data){
        alert(JSON.stringify(data));
        //alert(data.category.article.id);
    });

});

So when I view the data, alls I see is the very last Category information (U.S. Travel). It doesn’t show the top 2 at all. And I can’t reference them using data.category[1] or anything like that.

Does anyone know what I am doing wrong here?

Thanks

Answer 1

Your json file should look like this:

[{
    "name": "Caribbean Travel",
    "articles": [{
        "id": "1",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }]
}, {
    "name": "European Travel",
    "articles": [{
        "id": "2",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }]
}, {
    "name": "U.S. Travel",
    "articles": [{
        "id": "3",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }, {
        "id": "4",
        "title": "",
        "teaser": "",
        "image": "",
        "date": "",
        "map": "",
        "body": ""
    }]
}]

data[0] will be the first category, data[1] the second one etc.

alert(data[0].articles[0].id) //alert first category's first article's id
alert(data[2].name) //alert third category's name
alert(data[1].articles[0].body) //alert second category's first article's body
alert(data[2].articles[1].body) //alert third category's second article's body