CODEWITHSUNDEEP
javascriptloops
UXCODA
UXCODA

Reputation: 1236

Assign to object within map

I'd like to assign to an object within an array map

Heres the array of objects I want to add to

const arr = [
 {
  "key": "Mike",
  "ref": 11800
 },
 {
  "key": "Raph",
  "ref": 9339
 },
 {
  "key": "Leo",
  "ref": 2560
 },
]

I want to add add a new property to the object called slug while I loop over it like below. Possibly map is not the right function to use here because ESLINT complains about assigning within the map.

arr.map((item) => {
  ...item,
  item.slug = `${item.key.toLowerCase();}/${String(item.ref)}`
});

Upvotes: 0

Views: 125

Answers (2)

wjatek
wjatek

Reputation: 1006

.map() returns a new array containing the results of calling provided function for each element, so you should assign it to the new variable:

const arr = [{
    "key": "Mike",
    "ref": 11800
  },
  {
    "key": "Raph",
    "ref": 9339
  },
  {
    "key": "Leo",
    "ref": 2560
  },
]

const newArr = arr.map(item => ({
  ...item,
  slug: `${item.key.toLowerCase()}/${String(item.ref)}`
}))

console.dir(newArr)

If you want to add something to existing objects within an array you should use a for loop or .forEach():

const arr = [{
    "key": "Mike",
    "ref": 11800
  },
  {
    "key": "Raph",
    "ref": 9339
  },
  {
    "key": "Leo",
    "ref": 2560
  },
]

arr.forEach(item => {
  item.slug = `${item.key.toLowerCase()}/${String(item.ref)}`
})

console.dir(arr)

Upvotes: 4

Dai
Dai

Reputation: 155513

When mutating an array, or perform operations with side-effects, you should use a for loop or the Array.prototype.forEach method. If you want to perform pure functional operations over an array, then use Array.prototype.filter, Array.prototype.map, etc.

If you want to set a new property on the existing array elements then do this:

const arr = [ { key: "Mike", ref: 11800 }, /*etc*/ ];

for( const e of arr ) {
    e.slug = e.key.toLowerCase() + "/" + e.ref.toString();
}

If you want to generate a new array with new members, then do this:

const arr = [ { key: "Mike", ref: 11800 }, /*etc*/ ];

// Note the parentheses within `map` to avoid ambiguous syntax:
const newArr = arr.map( e => ( { slug: e.key.toLowerCase() + "/" + e.ref.toString() } ) );

console.log( newArr ); // [ { slug: "mike/11800" } ]

Alternatively, to copy over all properties and then add new properties use Object.assign:

const arr = [ { key: "Mike", ref: 11800 }, /*etc*/ ];

const newArr = arr.map( e => Object.assign( {}, e, { slug: e.key.toLowerCase() + "/" + e.ref.toString() } ) );

console.log( newArr ); // [ { key: "Mike", ref: 11800, slug: "mike/11800" } ]

Upvotes: 3

Related Questions