CODEWITHSUNDEEP
javascriptjsonbackbone.js
Kode
Kode

Reputation: 3215

Get Child JSON Values from Objects

I have an endpoint with two JSON Objects as follows:

{
"main" {
"id": 1,
"title": Main Title,
},
{
"secondary" {
"id": 3,
"title": Secondary Title,
},

I am using backbone and have the following $each function, but using dot notation, I can't seem to be able to browse to the titles (ex. main.title or secondary.title). What am I missing?

var collection = new contentArticles([], { id: urlid });
            collection.fetch({
                dataType: "json",
                success: function (model, response) {
                    console.log(response);
                    $.each(response, function (index, value) {
                        console.log(value.main.title);
                        $("#test2").append('<li>' + value.main.title + '</li>');
                    });

In my console, it gives an error of: Uncaught TypeError: Cannot read property 'title' of undefined

Upvotes: 1

Views: 1316

Answers (2)

Thad Blankenship
Thad Blankenship

Reputation: 2292

Assuming your JSON is actually valid when returned (it isn't valid the way you show it), try

$("#test2").append('<li>' + value.title + '</li>');

Your actual JSON should look like:

{
    "main": {
        "id": 1,
        "title": Main Title,
    },
    "secondary": {
        "id": 3,
        "title": Secondary Title,
     }
}

If you just want the value of main, instead of using $.each(), remove that entire block and do:

$("#test2").append('<li>' + response.main.title + '</li>');

And your final code would look something like:

var collection = new contentArticles([], { id: urlid });
collection.fetch({
    dataType: "json",
    success: function (model, response) {
        console.log(response);
        if (response.main.title !== 'undefined'){
            $("#test2").append('<li>' + value.main.title + '</li>');
        }else{
            console.log('Main is undefined');
        }
    }
});

Final Edit: It looks like you want JSON like:

{
    "main": [{
        "id": 1,
        "title": "Main Title"
    }, {
        "id": 2,
        "title": "Main Title 2"
    }, {
        "id": 3,
        "title": "Main Title 3"
    }],
    "secondary": [{
        "id": 5,
        "title": "Secondary Title 5"
    }, {
        "id": 34,
        "title": "Secondary Title 34"
    }, {
        "id": 36,
        "title": "Secondary Title 36"
    }]
}

If that is the case your code would look like:

var collection = new contentArticles([], { id: urlid });
collection.fetch({
    dataType: "json",
    success: function (model, response) {
        console.log(response);
        $.each(function(index, value){
            $.each(item_index, item_value){
                $("#test2").append('<li>' + item_value.title + '</li>');
            }
        });
    }
});

Upvotes: 1

Aditya Singh
Aditya Singh

Reputation: 9612

The problem lies with input JSON, it should be

{
  "main" :{
  "id": 1,
  "title": "Main Title"
  },
  "secondary":{
  "id": 3,
  "title": "Secondary Title"
  }
}

Upvotes: 1

Related Questions