Setting array of objects using map returns same value

Question

I have an array

listItems 
0: "/static/media/m1.895f1b11.jpg"
1: "/static/media/m2.895f1b11.jpg"
length: 2

And a Object

item={
  src: "", 
  key: ""
}

I`m trying to add each listItems to src in item like :

item={
  src: "/static/media/m1.895f1b11.jpg", 
  key: 0
}

and this item into items :

//before :
items = [];

//after (this is what I want) :
items = [
  {
  src: "/static/media/m1.895f1b11.jpg", 
  key: 0
},
{
  src: "/static/media/m2.895f1b11.jpg", 
  key: 1
}
];

to do this, I use the map in listItems and for each item I add it to src of my item object and then I add my item object to my array of objects items

listItems.map( (img,index) => {
                    item.src = img;
                    item.key = index;
                    console.log("item.src : " +item.src + " item.key : "+item.key + " img : "+img + " index "+ index);
                    items.push(item);
                });
                for(k=0;k<items2.length;k++)
                console.log("items["+k+"] : "+items[k].src);

It looks fine, but when i get my log results :

item.src : /static/media/m1.895f1b11.jpg item.key : 0 img : /static/media/m1.895f1b11.jpg index 0 
item.src : /static/media/m2.895f1b11.jpg item.key : 1 img : /static/media/m2.895f1b11.jpg index 1 
items[0] : /static/media/m2.895f1b11.jpg 
items[1] : /static/media/m2.895f1b11.jpg

Booth items[0] and items[1] are the same,where is the problem?

Where are you creating a new item?

d_bhatnagar
– d_bhatnagar

2020-07-02 18:15:12 +00:00
Commented Jul 2, 2020 at 18:15 — d_bhatnagar
– d_bhatnagar, Commented Jul 2, 2020 at 18:15

trincot · Accepted Answer · 2020-07-02 18:17:46Z

3

The problem is that you only have one item object, which you just modify in the loop. Realise that even when you have pushed item in an array, this doesn't mean you cannot still mutate it. And that you do (in the next iteration of the loop), and then you push item again, so your array has now two references to the same object (in its latest state).

A side note: .map is intended to return an array. Use that power.

let items = listItems.map((img, index) => {
    return { // a NEW object
        src: img,
        key: index
    };
});

Or even shorter, by using smart names for your variables, and the arrow-function-expression syntax:

let items = listItems.map((src, key) => ({src, key}));

answered Jul 2, 2020 at 18:17

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

cyr_x · Accepted Answer · 2020-07-02 18:18:13Z

0

Because you're operating on the same object instance. With item.src = img you're just updating the src property of the same object instance, therefore you get the same object inside the array 2 times.

You need to create new object instances for each item:

const items = listItems.map((src, index) => ({
  key: index,
  src,
}));

The ... => ({ ... }) creates a new object instance for each item, it can also written like:

const items = listItems.map((src, index) => {
  return {
    key: index,
    src,
  }
});

answered Jul 2, 2020 at 18:18

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Comments

bjastski · Accepted Answer · 2020-07-02 18:24:12Z

0

you should do something like this

const listItems = ["/static/media/m1.895f1b11.jpg", "/static/media/m2.895f1b11.jpg"]

const list = []

listItems.map((item, index) => {
        let newObj = {}
    newObj.src = item;
    newObj.key = index;
    list.push(newObj);
}   )

console.log(list)

create each object inside the map and push that object to the array.

answered Jul 2, 2020 at 18:24

bjastski

543 bronze badges

1 Comment

user12407908 Over a year ago

If you're going to use .map(), then you should use it as it's intended to be used. Right now you're building and discarding an extra array filled with undefined.

Collectives™ on Stack Overflow

Setting array of objects using map returns same value

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related