Getting json response into a javascript array

Question

Hi all, If I have the following function that iterates through a json response object (val2):

function test(val2){

    jQuery.each(val2.maps, function(j, val3) {    

        maps = new Array({

            id: val2.maps[j].id,
            parent: val2.maps[j].parent,
            image: val2.maps[j].image,
            data: val2.maps[j].data,
            width: val2.maps[j].width,
            height: val2.maps[j].height,
            top: val2.maps[j].top,
            left: val2.maps[j].left                         
        })

    });

return maps
}

how do I get it into an array that resembles the following format? Currently I'm only getting back the last array item.

maps = [{
    id: 'south',
    parent: 'us',
    image: '/resources/images/maps/map_south.jpg',
    data: 'popups/region_south.html',
    width: '227px',
    height: '177px',
    top: '120px',
    left: '49px'
},
{
    id: 'east',
    parent: 'us',
    image: '/resources/images/maps/map_east.jpg',
    data: 'popups/region_east.html',
    width: '156px',
    height: '121px',
    top: '120px',
    left: '283px'
}]

Cheers

Answer 1

Something like this should do:

var result = [];
jQuery.each(val2.maps, function(j, val3) {    
    maps = result.push({
        id: val2.maps[j].id,
        ...
    });
});

Answer 2

You can use jQuery.map(), like this:

function test(val2){
  return jQuery.map(val2.maps, function() {    
    return {
             id: this.id,
             parent: this.parent,
             image: this.image,
             data: this.data,
             width: this.width,
             height: this.height,
             top: this.top,
             left: this.left                         
           };
  }).get();
}

Though, given the format, it seems like val2.maps is already the collection you're after, can you not use it directly?

Answer 3

Always fun when people post answers without explaining anything it seems to me that you don't actually know what you're doing here, so let me explain:

function test(val2){

    // use jQuery.each to apply a function to each element in val2.maps
    jQuery.each(val2.maps, function(j, val3) {    

        // here you create a new global variable called 'maps' and assign and Array to it
        // the constructor 'new Array' is given one argument here
        // which is the object in which you map the values
        // notice: you're always creating a new array with only ONE element
        //         therefore you never fill it up
        maps = new Array({

            // Instead of 'val2.maps[j].id', you could simply do 'val3.id' etc.
            // Since val3 already contains 'val2.maps[j]'
            id: val2.maps[j].id,
            parent: val2.maps[j].parent,
            image: val2.maps[j].image,
            data: val2.maps[j].data,
            width: val2.maps[j].width,
            height: val2.maps[j].height,
            top: val2.maps[j].top,
            left: val2.maps[j].left                         
        }) // missing semicolon here btw ;)

    });

    // this returns the last Array that was created
    return maps
}

Here's a fixed version, which actually does populate the array properly:

function test(val2){
    var maps = []; // create an array that's local to this function, so it does not override any global stuff
    jQuery.each(val2.maps, function(j, val3) {    

        // append a new element to the array, this time directly use 'val3'
        maps.push({
            id: val3.id,
            parent: val3.parent,
            image: val3.image,
            data: val3.data,
            width: val3.width,
            height: val3.height,
            top: val3.top,
            left: val3.left                         
        });
    });

    // this time return the array with all the elements
    return maps
}

Also all your code has basically no effect, since all you're doing is copying the elements of one array into another one without changing the structure in any way.

So in the end the values in both val2.maps and your returned maps are "identical", only difference is that they do not point to the same objects since you copied all the values into new ones.

If you don't need a copy or you want to keep the reference to the original values, this would do it:

function test(val2) {
    return val2.maps; // return the reference to maps
}

Nick has shown an even fancier version of doing the whole copying thing, but I thought it might help you more if someone would actually point out your mistakes, rather then posting even "crazier" jQuery code for you to copy&paste ;)

PS: Love my Firefox, Session just crashed but my answer was still here after the restart ^_^"