Iterate over an array of object and change object value

Question

I'm trying to iterate over an array of objects that looks like this:

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: some date
}, ....]

I'm iterating over the array with product ID that I received from the user, finding the relevant item according to it's id and changing the key "isRecieved" from false to true.

This is my code:

const filterReceivedProduct = (list, id) => {
  const changeReceivedState = list.filter((item) => {
      return item.id === id ? **item[isRecieved]** = true : item;
  })
  return changeReceivedState
}

But when I'm trying to access the object using bracket notation it return the value (in this case 'false') and I can't change the value to true..

What I'm doing wrong?

isRecieved is not a variable. You should use dot notation: item.isRecieved. The bracket notation would be item["isRecieved"]. — trincot
– trincot, Commented Aug 21, 2020 at 10:57

Nick Parsons · Accepted Answer · 2020-08-21 12:11:13Z

You don't need to use .filter() here. The filter method is for removing elements from an array. What you want to do is map each element/object to a new object, which has all the properties from the old object, containing an updated isRecieved property. To create a new object with all the properties of the old object, you can spread the properties and values from the old object into a new one ({...item}). You can then update the isRecived based on your whether the item id matched the id passed into your function:

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}, {
  id: 2,
  name: "Alex",
  storeName: "Apple",
  price: 200,
  isRecieved: false,
  deliveryDate: 'some date2'
}];

const filterReceivedProduct = (list, id) =>
  list.map(item => ({
    ...item,
    isRecieved: item.id === id // sets isRecieved to true or false based on the equalty comparison
  }));

const res = filterReceivedProduct(arr, 1);
console.log(res);

By creating a new object within the .map() callback, you're never mutating the original objects in your arr, treating everything as immutable.

Vivek Jain · Accepted Answer · 2020-08-21 11:11:00Z

2

Here filter make no sense. Filter use to filter some array based on condition. If you just want to change some property of an object inside array then use map for this purpose.

See below example.

const arr = [{
  id: 1,
  name: "John",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}, {
  id: 2,
  name: "Doe",
  storeName: "Amazon",
  price: 100,
  isRecieved: false,
  deliveryDate: 'some date'
}];

filterReceivedProduct = (list, id) => {
  return list.map(item => {
    if(item.id === id) {
      item.isRecieved = true;
    }
    return item;
  });
}

console.log(filterReceivedProduct(arr, 1))

answered Aug 21, 2020 at 11:11

Vivek Jain

2,8726 gold badges14 silver badges29 bronze badges

6 Comments

Always Helping Over a year ago

Use of map make no sense here.

Vivek Jain Over a year ago

@AlwaysHelping Reason?

Shira Over a year ago

Thanks but item.isRecieved also returns the object value and again, I can't change the value itself and there is an error : Cannot assign to read only property 'isRecieved' of object '[object Object]'

Vivek Jain Over a year ago

filter use to filter out some of the array based on some condition.

Always Helping Over a year ago

@Shira See my answer below which uses filter which works the same way as map. As per the your question that what was needed.

|

Ricardo Gellman · Accepted Answer · 2024-01-24 15:39:59Z

0

If you don't want to duplicate the array, and manipulate the current array, forEach can be the answer

list.forEach((item) => {
    item.isRecieved = item.id === id ? true: false;
});

edited Jan 24, 2024 at 15:39

answered Jan 24, 2024 at 15:02

Ricardo Gellman

1,41717 silver badges20 bronze badges

Collectives™ on Stack Overflow

Iterate over an array of object and change object value

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related