使用jQuery（或Javascript）将对象列表推入数组

Question

$=jQuery.noConflict();
$( document ).ready(function() {
    //returns an array of image links
    // ["http://velnikolic.com/gallery/wp-content/uploads/2017/04/file4741298583098-1-150x150.jpg", "http://velnikolic.com/gallery/wp-content/uploads/2017/04/file9221293737060-150x150.jpg", "http://velnikolic.com/gallery/wp-content/uploads/2017/04/file4741298583098-150x150.jpg"]
    var images = <?php echo json_encode($images); ?>;
    console.log(images);
    src = [];
    data = {}

    for (var i = 0; i < images.length; i++) {
        data = {
            src: images[i] 
        };

        src.push(data);
        console.log(data);
        //Data should equal [{src : imageurlxxx}, {src :imgurlxxdd}, {src :imgurlxxdd} ]}
    }
});//close

上面的代码应循环遍历images数组，并将其推入以src为键的对象，然后将其推入数组并重申。 问题在于该对象在数组中被覆盖，因为它们都具有相同的键。

Answer 1

您的代码完全符合您的期望，但是您检查了错误的变量：

 var images = ["A", "B", "C"] console.log(images); src = []; data = {} for (var i = 0; i < images.length; i++) { data = { src: images[i] }; // Here data is an object with 1 key only. src.push(data); } // Here - after the loop - the src variable will contain all of the values that you want. console.log(src); 

如果您正在寻找ES6解决方案，则可以使用以下解决方案：

 var images = ["A", "B", "C"]; var src = images.map((img) => { return {src: img} }); console.log(src); 

Answer 2

function getImages() {
    var images = <?php echo json_encode($images); ?>;
    return images.map(function (image) {
        return { src: image };
    }
};

假设您在php网站上使用了此方法，并且设置了$ images，则getImages（）返回如下内容：

 [
    {src: "http://velnikolic.com/gallery/wp-content/uploads/2017/04/file4741298583098-150x150.jpg"},
    {src: "http://velnikolic.com/gallery/wp-content/uploads/2017/04/file9221293737060-150x150.jpg"}, 
    {src: "http://velnikolic.com/gallery/wp-content/uploads/2017/04/file4741298583098-150x150.jpg"}
]

Answer 3

//Data should equal [{src : imageurlxxx}, {src :imgurlxxdd}, {src :imgurlxxdd} ]}
data = $.map(images, (image) => { src: image })

如果我正在阅读想要的内容，则只需要将图像网址映射到数组即可。