将 json 响应放入 javascript 数组中答案

【问题标题】：Getting json response into a javascript array将 json 响应放入 javascript 数组中
【发布时间】：2010-09-09 00:58:34
【问题描述】：

如果我有以下遍历 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'
}]

干杯

【问题讨论】：

标签： javascript arrays json

【解决方案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
}

Nick 展示了一个更漂亮的版本来完成整个复制操作，但我认为如果有人真正指出你的错误，而不是发布更“疯狂”的 jQuery 代码供你复制和粘贴，它可能会帮助你更多；）

PS：爱我的 Firefox，会话刚刚崩溃，但重启后我的答案仍然在这里 ^_^"

【讨论】：

感谢 Ivo 的回复，是的，你说我不知道我在做什么是正确的，所以我当然欢迎详细的解释。最后我只需要返回 val2.maps;

【解决方案2】：

应该这样做：

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

【讨论】：

【解决方案3】：

你可以使用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 似乎已经是您所追求的集合，您不能直接使用它吗？

【讨论】：