Update one of the objects in array, in an immutable way

Question

In React's this.state I have a property called formErrors containing the following dynamic array of objects.

[
  {fieldName: 'title', valid: false}, 
  {fieldName: 'description', valid: true},
  {fieldName: 'cityId', valid: false},
  {fieldName: 'hostDescription', valid: false},
]

Let's say I would need to update state's object having the fieldName cityId to the valid value of true.

What's the easiest or most common way to solve this?

I'm OK to use any of the libraries immutability-helper, immutable-js etc or ES6. I've tried and googled this for over 4 hours, and still cannot wrap my head around it. Would be extremely grateful for some help.

Did you try iterating over the array, and if fieldName === 'cityId' then set valid to true? This seems very straightforward.... what am I missing? It might help if you posted some of the things you've tried. — alexanderbird
– alexanderbird, Commented May 4, 2017 at 20:47
I am also thinking the same as @alexanderbird, so do you have a specific performance requirement? — Junbang Huang
– Junbang Huang, Commented May 4, 2017 at 20:48

Mayank Shukla · Accepted Answer · 2017-05-04 20:59:19Z

45

You can use map to iterate the data and check for the fieldName, if fieldName is cityId then you need to change the value and return a new object otherwise just return the same object.

Write it like this:

var data = [
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true},
    {fieldName: 'cityId', valid: false},
    {fieldName: 'hostDescription', valid: false},
]

var newData = data.map(el => {
                  if(el.fieldName == 'cityId')
                     return Object.assign({}, el, {valid:true})
                  return el
              });

this.setState({ data: newData });

edited May 4, 2017 at 20:59

answered May 4, 2017 at 20:57

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Ryan Over a year ago

Although this would iterate over the entire array regardless of when the item to be updated appears.

arp Over a year ago

You could set a simple flag in that case to optimize and avoid iterating through the whole array. Also you could replace Object.assign with spread operator like return {...el,valid:true}

accimeesterlin · Accepted Answer · 2019-02-11 19:58:35Z

14

Here is a sample example - ES6

The left is the code, and the right is the output

Here is the code below

const data = [
    { fieldName: 'title', valid: false }, 
    { fieldName: 'description', valid: true },
    { fieldName: 'cityId', valid: false }, // old data
    { fieldName: 'hostDescription', valid: false },
]

const newData = data.map(obj => {
  if(obj.fieldName === 'cityId') // check if fieldName equals to cityId
     return {
       ...obj,
       valid: true,
       description: 'You can also add more values here' // Example of data extra fields
     }
  return obj
});

const result = { data: newData }; 

console.log(result);

this.setState({ data: newData });

Hope this helps, Happy Coding!

answered Feb 11, 2019 at 19:58

accimeesterlin

4,7462 gold badges28 silver badges18 bronze badges

2 Comments

Derek Over a year ago

What is the name of the program you are using in your screenshot?

shmup Over a year ago

@Derek I think this is one of the popular tools that can achieve the same thing: getsharex.com

Omortis · Accepted Answer · 2017-05-04 21:06:25Z

2

How about immutability-helper? Works very well. You're looking for the $merge command I think.

@FellowStranger: I have one (and only one) section of my redux state that is an array of objects. I use the index in the reducer to update the correct entry:

case EMIT_DATA_TYPE_SELECT_CHANGE:
  return state.map( (sigmap, index) => {
    if ( index !== action.payload.index ) {
      return sigmap;
    } else {
      return update(sigmap, {$merge: {
        data_type: action.payload.value
      }})
    }
})

Frankly, this is kind of greasy, and I intend to change that part of my state object, but it does work... It doesn't sound like you're using redux but the tactic should be similar.

edited May 4, 2017 at 21:06

answered May 4, 2017 at 20:56

Omortis

1,5802 gold badges27 silver badges51 bronze badges

4 Comments

Fellow Stranger Over a year ago

The problem is that I've tried it but cannot understand their syntax how to replace a value in array of objects :/

Hamms Over a year ago

simply follow the example here: github.com/kolodny/immutability-helper#nested-collections. You want to update the valid parameter of the object at index 2, so something like update(formErrors, {2: {valid: {$set: true}}})

Hamms Over a year ago

or update(formErrors, {2: {$merge: {valid: true}}})

Omortis Over a year ago

@FellowStranger definitely futz with immutability-helper's update function. Very, very useful. It does take a while to learn the syntax....

FuzzyTree · Accepted Answer · 2017-05-04 21:10:25Z

1

Instead of storing your values in an array, I strongly suggest using an object instead so you can easily specify which element you want to update. In the example below the key is the fieldName but it can be any unique identifier:

var fields = {
    title: {
        valid: false
    },
    description: {
        valid: true
    }
}

then you can use immutability-helper's update function:

var newFields = update(fields, {title: {valid: {$set: true}}})

answered May 4, 2017 at 21:10

FuzzyTree

32.4k3 gold badges58 silver badges87 bronze badges

Comments

trincot · Accepted Answer · 2024-12-06 12:17:48Z

0

With ECMAScript 2023 we got the with method that could be the right fit for this purpose:

const data = [
  {fieldName: 'title', valid: false}, 
  {fieldName: 'description', valid: true},
  {fieldName: 'cityId', valid: false},
  {fieldName: 'hostDescription', valid: false},
];

const i = data.findIndex(({fieldName}) => fieldName === 'cityId');
const newData = data.with(i, {...data[i], valid: true });

console.log(newData);

answered Dec 6, 2024 at 12:17

trincot

357k38 gold badges282 silver badges339 bronze badges

Collectives™ on Stack Overflow

Update one of the objects in array, in an immutable way

5 Answers 5

2 Comments

Here is a sample example - ES6

2 Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Here is a sample example - ES6

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related