Push A List of Objects Into an Array Using jQuery (Or 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

The above code should loop through the images array and push it into an object with src as the key, then it should push this object into an array and reiterate. The problem is that the object is overwritten in the array because they all have the same key.

Actually - data should only equal to an object with one key, and not to what you are looking for. The src variable should have what you are looking for, and it will be after the for loop. — Dekel
– Dekel, Commented May 22, 2017 at 21:22

Dekel · Accepted Answer · 2017-05-22 21:28:36Z

6

Your code does exactly what you are looking for, but you checked the wrong variable:

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

And if you are looking for an ES6 solution you can use this one:

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

edited May 22, 2017 at 21:28

answered May 22, 2017 at 21:23

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

1 Comment

Dekel Over a year ago

@TxRegex the images are already javascript-object, and not a string

TxRegex · Accepted Answer · 2017-05-23 21:57:32Z

1

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

Assuming you are using this on a php site and $images is set, getImages() returns something like this:

 [
    {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"}
]

edited May 23, 2017 at 21:57

answered May 22, 2017 at 21:33

TxRegex

2,44523 silver badges21 bronze badges

Comments

Taplar · Accepted Answer · 2017-05-22 21:25:18Z

0

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

If i'm reading what you want right, you just need to map your image urls into the array like you want them.

answered May 22, 2017 at 21:25

Taplar

25k4 gold badges24 silver badges36 bronze badges

1 Comment

Dekel Over a year ago

There is no need for jquery map here, you can use Array.map function (you can check the example in my answer)

Collectives™ on Stack Overflow

Push A List of Objects Into an Array Using jQuery (Or Javascript)

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related