Получение ответа json в массив javascript

Question

Если у меня есть следующая функция, которая перебирает объект ответа json (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
}

как мне получить его в массив, который похож на следующий формат?В настоящее время я получаю только последний элемент массива.

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

Всегда весело, когда люди публикуют ответы без объяснения чего-либо мне кажется, что вы на самом деле не знаете, что делаете здесь, поэтому позвольте мне объяснить:

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
}

Вот исправленная версия, которая на самом деле правильно заполняет массив:

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
}

Кроме того, весь ваш код практически не имеет никакого эффекта, поскольку все, что вы делаете, это копирование элементов одного массива в другой без какого-либо изменения структуры.

Таким образом, в итоге значения как val2.maps, так и возвращенного вами maps являются «идентичными», единственное отличие состоит в том, что они не указывают на одни и те же объекты, поскольку вы скопировали все значения в новые.

Если вам не нужна копия или вы хотите сохранить ссылку на исходные значения, это будет сделано:

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

Ник показал еще более причудливую версию всего процесса копирования, но я подумал, что это может помочь вам больше, если кто-то на самом деле укажет на ваши ошибки, вместо того, чтобы публиковать даже более "безумный" код jQuery для копирования и вставки;)

PS: Мне нравится мой Firefox, сессия только что завершилась, но мой ответ все еще был здесь после перезагрузки ^ _ ^ "

Answer 2

Вы можете использовать jQuery.map(), например:

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();
}

Хотя, учитывая формат, кажется, что val2.maps уже уже коллекция, которую вы ищете, вы не можете использовать ее напрямую?

Answer 3

Примерно так должно поступить:

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