Javascript syntax for accessing elements of associative arrays within arrays

Question

I can not work out the javascript syntax to access elements of the following, which has been stringify'd after being returned as JSON from php/mysql.

vehs contains

[[{"vehID":"8","vehGrpType":"CAR","vehSubGrp":"Alfa Romeo","vehTitle":"Alfa Romeo 6C","vehPeriod":"","vehDescrip":"","vehNotes":"","vehGallery":"0","vehGallPath":"","vehGallImgs":""}],[{"vehID":"9","vehGrpType":"CAR","vehSubGrp":"Alfa Romeo","vehTitle":"Alfa Romeo 75 (1985-92)","vehPeriod":"","vehDescrip":"","vehNotes":"","vehGallery":"0","vehGallPath":"","vehGallImgs":""}],[{"vehID":"10","vehGrpType":"CAR","vehSubGrp":"Alfa Romeo","vehTitle":"Alfa Romeo GTV (1995-2000) and Spider (1995-2006)","vehPeriod":"","vehDescrip":"","vehNotes":"","vehGallery":"0","vehGallPath":"","vehGallImgs":""}]]

I am trying

    for (var veh in vehs) {
        $('#selectDIV').append(veh['vehTitle'] + '<br>');
    }

But all I get is the numerics 0, 1 and 2, which I assume are the indexes of the three entries.

I have misunderstood something along the way, about associative arrays within array elements. So I am a bit stuck and am not knowledgeable enough to know what combination to try next.

Any help appreciated, as I am sure it is very straightforward.

Thanks

Rob W · Accepted Answer · 2012-02-19 21:02:50Z

2

The associative array is not an element of the main array.
The main array is composed of arrays, which only contain the associative array. Refer to it using [0].

Also, since vehs is an array, I recommend to use a for(;;) loop to loop through it, so that user-defined prototype methods are not inherit.
For performance reasons, I recommend to append the string at last.

var string = [];
for (var i=0; i<vehs.length; i++) {
    var veh = vehs[i];
    string.push(veh[0]['vehTitle'] + '<br>');;
}
$('#selectDIV').append(string.join(''));

Demo: http://jsfiddle.net/NgmFP/

edited Feb 19, 2012 at 21:02

answered Feb 19, 2012 at 20:57

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mcl Over a year ago

Curses - I had high hopes for your solution, but it is giving me undefined.

Rob W Over a year ago

@mcl My code is working fine, see this demo: jsfiddle.net/NgmFP. Did you implement it wrongly?

mcl Over a year ago

Many thanks. I can see yours works and I do not know why mine does not - I just changed the line in my original loop. I can appreciate the build string, with one append is quicker. I hope I can do this for all the fields. I have to admit I have no knowledge of the issue of ;;. Thanks again at least I can make some progress and I have learned a bit more.

ixx · Accepted Answer · 2012-02-19 21:05:01Z

1

It's a 2 dimensional array. You have 3 array elements, each one containing one object.

for (var index in vehs) {
    $('#selectDIV').append(vehs[index][0]['vehTitle'] + '<br>');
}

edited Feb 19, 2012 at 21:05

answered Feb 19, 2012 at 20:58

ixx

32.3k41 gold badges139 silver badges239 bronze badges

Comments

KooiInc · Accepted Answer · 2012-02-19 21:11:07Z

1

vehs is an array, containing 3 arrays, each containing an object. So, you'll have to use:

for (var i = 0;i<vehs.length;(i=i+1)) {
        $('#selectDIV').append(vehs[i][0].vehTitle + '<br>');
}

answered Feb 19, 2012 at 21:11

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Comments

georg · Accepted Answer · 2012-02-19 21:18:03Z

1

Reformatted, your array looks like this:

vehs = [[{
    "vehID": "8",
    "vehGrpType": "CAR",
    "vehSubGrp": "Alfa Romeo",
    "vehTitle": "Alfa Romeo 6C",
    "vehPeriod": "",
    "vehDescrip": "",
    "vehNotes": "",
    "vehGallery": "0",
    "vehGallPath": "",
    "vehGallImgs": ""
}], [{
    "vehID": "9",
    "vehGrpType": "CAR",
    "vehSubGrp": "Alfa Romeo",
    "vehTitle": "Alfa Romeo 75 (1985-92)",
    "vehPeriod": "",
    "vehDescrip": "",
    "vehNotes": "",
    "vehGallery": "0",
    "vehGallPath": "",
    "vehGallImgs": ""
}], [{
    "vehID": "10",
    "vehGrpType": "CAR",
    "vehSubGrp": "Alfa Romeo",
    "vehTitle": "Alfa Romeo GTV (1995-2000) and Spider (1995-2006)",
    "vehPeriod": "",
    "vehDescrip": "",
    "vehNotes": "",
    "vehGallery": "0",
    "vehGallPath": "",
    "vehGallImgs": ""
}]]

You can simplify it by getting rid of extra inner arrays:

objects = $(vehs).map([].pop)

and then iterate in a usual jQuery way:

$(objects).each(function() {
    console.log(this.vehTitle) // or whatever you want to do
})

If you only need one specific property, you can "pluck" it from the array using this little pythonesque utility function:

itemgetter = function(prop) {
    return function() { return this[prop] }
}

and then:

titles = $(objects).map(itemgetter('vehTitle'))

edited Feb 19, 2012 at 21:18

answered Feb 19, 2012 at 21:09

georg

216k57 gold badges324 silver badges401 bronze badges

1 Comment

mcl Over a year ago

Thank you - looks interesting. I will try this tomorrow. Several new concepts to understand.

Collectives™ on Stack Overflow

Javascript syntax for accessing elements of associative arrays within arrays

4 Answers 4

Demo: http://jsfiddle.net/NgmFP/

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo: http://jsfiddle.net/NgmFP/

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related