CODEWITHSUNDEEP
javascriptarraysjavascript-objects
Athos
Athos

Reputation: 43

Setting array of objects using map returns same value

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?

Upvotes: 0

Views: 1909

Answers (3)

bjastski
bjastski

Reputation: 54

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.

Upvotes: 0

cyr_x
cyr_x

Reputation: 14257

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

Upvotes: 0

trincot
trincot

Reputation: 350270

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

Upvotes: 3

Related Questions