How to change a array of object inside a object?

Question

I have an object that contain a property with an array of objects which I have to change one object.

{id: '3688aa8f-e725-45f4-9513-363a1c019b34',
 category: 'Entertainment: Film',
 difficulty: 'easy',
 question: "What is the orange and white bot's name in &quot;Star Wars: The Force Awakens&quot;?",
  answers: [ 
    {id: 'da42762a-e936-42d8-ae61-2a0de53d3c5e', incorrect_answer: 'Austria', isSelected: false}, 
    {id: '44d8549f-31a7-4cdd-8a6b-80cf6a1b853c', incorrect_answer: 'Armenia', isSelected: false},
    {id: '2f734291-b4cf-48a0-8e54-3379b7d23ecb', incorrect_answer: 'Australia', isSelected: false},
    {id: 'dfa6fa70-3b44-44fe-b80a-fc9da72a6c7f', incorrect_answer: 'Afghanistan', isSelected: false}
   ]
}

How can I iterate over the answers array and change the property isSelected to true?

I am trying to use the spread operator, but its not working.

Maybe use find to find the object using the id in the condition, and then update the other value? — Andy
– Andy, Commented Jan 2, 2023 at 18:40
Is this stored in react state? Because if so, the above comments would break the rules of react in regards to immutability. — adsy
– adsy, Commented Jan 2, 2023 at 18:52
@lharby map return value must be the whole item object and not only e.isSelected = true — Mehyar Sawas
– Mehyar Sawas, Commented Jan 2, 2023 at 18:52

adsy · Accepted Answer · 2023-01-02 18:56:14Z

0

Since your post is tagged with React, it's additionally important (if this object is contained within React state) to do this in a way that does not mutate the original structure, but instead, creates a new structure with the desired edit.

For the sake of example, I'm going to assume it's stored in some react state I've called obj.

const setAnswerIsSelected = (idToChange, isSelected) => {
    setObj(prevObj => ({
        ...prevObj,
        answers: [
          { ...prevObj.find(({id}) => id === idToChange), isSelected },
          ...prevObj.filter(({id}) => id !== idToChange) 
        ]
    }))

}

Just getting the answer object itself and mutating it is not a good idea if this is in React state as doing so is not allowed in React.

Deep updates can be cumbersome. Changing the state structure to be flatter and spread across multiple items can alleviate this. Or use something like Immer.

answered Jan 2, 2023 at 18:56

adsy

12k2 gold badges27 silver badges43 bronze badges

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

1 Comment

Asaph Ferreira Over a year ago

Thanks Adsy for the advice. Actually the data is more cumbersome than this because which object of data like is inside of another array. I will take your advice and change the state structure.

Mehyar Sawas · Accepted Answer · 2023-01-02 19:00:24Z

Spread Operator Solution

as @adsy mentioned with this solution you will lose the object reference to the answers item if its used somewhere else in your app. The spread operator will create a new object of the array item.

const obj = {id: '3688aa8f-e725-45f4-9513-363a1c019b34',
 category: 'Entertainment: Film',
 difficulty: 'easy',
 question: "What is the orange and white bot's name in &quot;Star Wars: The Force Awakens&quot;?",
  answers: [ 
    {id: 'da42762a-e936-42d8-ae61-2a0de53d3c5e', incorrect_answer: 'Austria', isSelected: false}, 
    {id: '44d8549f-31a7-4cdd-8a6b-80cf6a1b853c', incorrect_answer: 'Armenia', isSelected: false},
    {id: '2f734291-b4cf-48a0-8e54-3379b7d23ecb', incorrect_answer: 'Australia', isSelected: false},
    {id: 'dfa6fa70-3b44-44fe-b80a-fc9da72a6c7f', incorrect_answer: 'Afghanistan', isSelected: false}
   ]
};

obj.answers = obj.answers.map(e => ({...e, isSelected: true}));
console.log(obj.answers);

forEach Solution

const obj = {id: '3688aa8f-e725-45f4-9513-363a1c019b34',
 category: 'Entertainment: Film',
 difficulty: 'easy',
 question: "What is the orange and white bot's name in &quot;Star Wars: The Force Awakens&quot;?",
  answers: [ 
    {id: 'da42762a-e936-42d8-ae61-2a0de53d3c5e', incorrect_answer: 'Austria', isSelected: false}, 
    {id: '44d8549f-31a7-4cdd-8a6b-80cf6a1b853c', incorrect_answer: 'Armenia', isSelected: false},
    {id: '2f734291-b4cf-48a0-8e54-3379b7d23ecb', incorrect_answer: 'Australia', isSelected: false},
    {id: 'dfa6fa70-3b44-44fe-b80a-fc9da72a6c7f', incorrect_answer: 'Afghanistan', isSelected: false}
   ]
};

obj.answers.forEach(e => e.isSelected = true);
console.log(obj.answers);

I think this is still potentially problematic as answers is still mutated. Though the way of mapping over it is cleaner than mine. If you adopt my approach but also use your use of map it'd be the best answer :).

Collectives™ on Stack Overflow

How to change a array of object inside a object?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related