Referencing a javascript object literal array

Question

How would you reference the models (Accord, CRV, Prius, etc) in this structure? Is this a bad structure to be able to extract the makes...then use a make to get the models...then use the model to get the options?

var cars = [
    {
        "makes"   : "Honda",
        "models"   : [
            {'Accord' : ["2dr","4dr"]} ,
            {'CRV'    : ["2dr","Hatchback"]} ,
            {'Pilot'  : ["base","superDuper"] }
        ]
    }, 
    {
        "makes"   : "Toyota",
        "models"  : [
            {'Prius'   : ["green","reallyGreen"]} ,
            {'Camry'   : ["sporty","square"]} ,
            {'Corolla' : ["cheap","superFly"] }
        ]
    }
];              

Thanks

Solution 1

The structure:

var cars = [
    { name: 'Honda', models: [
                { name: 'Accord', features: ['2dr', '4dr'] },
                { name: 'CRV', features: ['2dr', 'Hatchback'] },
                { name: 'Pilot', features: ['base', 'superDuper'] }
        ]},

    { name: 'Toyota', models: [
                { name: 'Prius', features: ['green', 'superGreen'] },
                { name: 'Camry', features: ['sporty', 'square'] },
                { name: 'Corolla', features: ['cheap', 'superFly'] }
        ]}
];

I wrote about the traversal and everything else here.

Solution 2

cars[0].models.Accord cars[0].models.CRV cars[0].models.Pilot (See olliej's answer)

Though, it may be easier to use the following access concept:

cars.Honda.Accord
cars.Toyota.Prius

...using...

var cars = {
  Honda : {
    Accord : ["2dr", "4dr"],
    CRV    : ["2dr", "Hatchback"],
    Pilot  : ["base", "superDuper"]
  },
  Toyota : {
    Prius : ["green", "reallyGreen"],
    Camry : ["sporty", "square"],
    Corolla : ["cheap", "superFly"]
  }
};

Solution 3

Jonathan's is correct, but he missed the additional level of Array's at the model level, so it should be

 cars[0].models[0].Accord
 cars[0].models[1].CRV

etc

I suspect you would find it easier to use a structure along the lines of:

var cars = [
{makes  : "Honda",
 models  : {
    Accord : ["2dr","4dr"],
    CRV  : ["2dr","Hatchback"],
    Pilot: ["base","superDuper"]  
 }
}, 
{makes   :"Toyota",
 models  : {
    Prius   : ["green","reallyGreen"],
    Camry   : ["sporty","square"],
    Corolla : ["cheap","superFly"]
 }
}];

In which the models array is replaced by an object (or associative array if you like)

[edit (olliej): tidying up code in second example]

Solution 4

You can traverse models with this code:

for (var i = 0, carslen = cars.length; i < carslen; i++) {
    for (var j = 0, modelslen = cars[i].models.length; j < modelslen; j++) {
        // do something with cars[i].models[j]
    }
}

but I agree with Olliej about changing the structure of your JSON to his format.

View more solutions

Comments

[AC88]

This looks like a JSON response, so no methods for you.

[Mona alawfi]

The proper way to use JSON is to add a layer of code wrapper over your raw eval() function (mostly for security reasons). At that layer, you could properly encapsulate your data with a bit of work. It would be a good idea, at least.

[goofballLogic]

I chose this answer because it answered the question "Is this bad structure...?" which was yes...by adding fixed "names" (i.e. name, models, etc.) it allows me to iterate over the data with loops (and other ways as Marko Dumic put in his other answer) thanks