nested json in backboneJS view

Question

I have this json as follow

[
 {
    "name":"River In 1", 
    "lat": 3.277801, 
    "lng": 101.681199,
    y: 55.11,
    drilldown: {
        data: [{"x":1.3722048e+12,"y":72.21},
                     {"x":1.3722057e+12,"y":67.84},
                     {"x":1.3722066e+12,"y":71.47},
                     {"x":1.3722075e+12,"y":71.22},
                     {"x":1.3722084e+12,"y":69.84},
                     {"x":1.3722093e+12,"y":65.19},
                     {"x":1.3722102e+12,"y":75.35},
                     {"x":1.3722111e+12,"y":75.32},
                     {"x":1.372212e+12,"y":70.31},
                     {"x":1.3722129e+12,"y":68.84},
                     {"x":1.3722138e+12,"y":66.19}]
    }   
},
{
    "name":"River In 2", 
    "lat": 3.272488, 
    "lng": 101.685491,
    y: 21.63,
    drilldown: {
        data: [{"x":1.3722048e+12,"y":72.21},
                     {"x":1.3722057e+12,"y":67.84},
                     {"x":1.3722066e+12,"y":71.47},
                     {"x":1.3722075e+12,"y":71.22},
                     {"x":1.3722084e+12,"y":69.84},
                     {"x":1.3722093e+12,"y":65.19},
                     {"x":1.3722102e+12,"y":75.35},
                     {"x":1.3722111e+12,"y":75.32},
                     {"x":1.372212e+12,"y":70.31},
                     {"x":1.3722129e+12,"y":68.84},
                     {"x":1.3722138e+12,"y":66.19}]
    }
},
{
    "name":"Ext River 1", 
    "lat": 3.288770, 
    "lng": 101.695583,
    y: 11.94,
    drilldown: {
            data: [{"x":1.3722048e+12,"y":72.21},
                         {"x":1.3722057e+12,"y":67.84},
                         {"x":1.3722066e+12,"y":71.47},
                         {"x":1.3722075e+12,"y":71.22},
                         {"x":1.3722084e+12,"y":69.84},
                         {"x":1.3722093e+12,"y":65.19},
                         {"x":1.3722102e+12,"y":75.35},
                         {"x":1.3722111e+12,"y":75.32},
                         {"x":1.372212e+12,"y":70.31},
                         {"x":1.3722129e+12,"y":68.84},
                         {"x":1.3722138e+12,"y":66.19}]
    }
},
{
    "name":"Ext River 2", 
    "lat": 3.284699, 
    "lng": 101.691960,
    y: 7.15,
    drilldown: {
            data: [{"x":1.3722048e+12,"y":72.21},
                         {"x":1.3722057e+12,"y":67.84},
                         {"x":1.3722066e+12,"y":71.47},
                         {"x":1.3722075e+12,"y":71.22},
                         {"x":1.3722084e+12,"y":69.84},
                         {"x":1.3722093e+12,"y":65.19},
                         {"x":1.3722102e+12,"y":75.35},
                         {"x":1.3722111e+12,"y":75.32},
                         {"x":1.372212e+12,"y":70.31},
                         {"x":1.3722129e+12,"y":68.84},
                         {"x":1.3722138e+12,"y":66.19}]
    }       
},
{
    "name":"Ext River 3", 
    "lat": 3.273645, 
    "lng": 101.690136,
    y: 2.14,
    drilldown: {
        data: [{"x":1.3722048e+12,"y":72.21},
                     {"x":1.3722057e+12,"y":67.84},
                     {"x":1.3722066e+12,"y":71.47},
                     {"x":1.3722075e+12,"y":71.22},
                     {"x":1.3722084e+12,"y":69.84},
                     {"x":1.3722093e+12,"y":65.19},
                     {"x":1.3722102e+12,"y":75.35},
                     {"x":1.3722111e+12,"y":75.32},
                     {"x":1.372212e+12,"y":70.31},
                     {"x":1.3722129e+12,"y":68.84},
                     {"x":1.3722138e+12,"y":66.19}]
    }
}
]

and i refer to this and no solution satisfied my level of knowledge about backboneJS.

Normally i used to get it like model.get('name') but couldn't get the nested item/object. Anyone can help to get item in the 'drilldown'

score 1 · Accepted Answer · answered Sep 11 '13 at 06:04

1

Since the drilldown is directly set as a model attribute, you would first use model.get('drilldown'). Then we get to data as a property with model.get('drilldown').data and then iterate over the data property which is an array:

for (var i = 0, data = model.get('drilldown').data; i < data.length; i++) {
   // Each array element data[i] has a x and y property
   console.log(data[i].x, data[i].y);  // Logs 1.3722057e+12, 67.84
}

answered Sep 11 '13 at 06:04

Herman Tran

1,581
2
12
19

your solution seems easy for to understand but i think i have error on the json return. I'm not sure which json part is missing. – Muhaimin Sep 11 '13 at 06:09
error trigger during fetch, so i tried to catch the error but nothing hint me to the cause – Muhaimin Sep 11 '13 at 06:10
Yep, if you pass the data into [JSONLint](http://jsonlint.com), it doesn't validate because all properties and values need to be in quotes: such as `"y": 11.94,"drilldown": ` So just make all the `y`, `drilldown`, and `data` properties quoted. – Herman Tran Sep 11 '13 at 06:12

nested json in backboneJS view

1 Answers1