Update an element in an array in React (using filter /map)

Question

I have an array which is of this structure:

this.state.mainArray= [{
    "Upperelement1": "12345",
    "Upperelement2" : [
        {
          Key1:'ok1',Key2:'ok2',Key3:'ok3'
        },
        {
          Key1:'ok4',Key2:'ok6',Key3:'ok7'
        },
        ]
    },
    {
    "Upperelement1": "6789",
    "Upperelement2" : [
        {
          Key1:'ok8',Key2:'ok9',Key3:'o10'
        },
        {
          Key1:'ok11',Key2:'ok12',Key3:'ok13'
        },
        ]
     }
    ]

Idea is to iterate through the array and find element where Upperelement1 = 12345 and Key1:'ok1' (value of key is unique) and add another key to Upperelement2, key4. After updation, array will look like:

  [{
    "Upperelement1": "12345",
    "Upperelement2" : [
        {

        Key1:'ok1',Key2:'ok2',Key3:'ok3',Key4:'somevalue'
        },
        {
          Key1:'ok4',Key2:'ok6',Key3:'ok7'
        },
        ]
    },
    {
    "Upperelement1": "6789",
    "Upperelement2" : [
        {
          Key1:'ok8',Key2:'ok9',Key3:'o10'
        },
        {
          Key1:'ok11',Key2:'ok12',Key3:'ok13'
        },
        ]
     }
    ]

I tried something like way:

mainArray.map(items => if (items. Upperelement1 == '12345')

but that does not work, Any thoughts how this can be achieved ? Can we use filter ?

Nikhil · Accepted Answer · 2019-09-11 06:25:20Z

2

You can use find(), some(), and map() to do that.

var data = [{ Upperelement1: "12345", Upperelement2: [{ Key1: "ok1", Key2: "ok2", Key3: "ok3" }, { Key1: "ok4", Key2: "ok6", Key3: "ok7" }, ] }, { Upperelement1: "6789", Upperelement2: [{ Key1: "ok8", Key2: "ok9", Key3: "o10" }, { Key1: "ok11", Key2: "ok12", Key3: "ok13" }, ] } ]; 

data.find(item =>
    item.Upperelement1 === "12345" &&
    item.Upperelement2.some(value => value.Key1 === "ok1")
  )
  .Upperelement2.map(item => {
    if (item.Key1 === "ok1") {
      item["Key4"] = "somevalue";
    }
    return item;
  });

console.log(data);

edited Sep 11, 2019 at 6:25

answered Sep 11, 2019 at 6:16

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

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

Comments

Giang Le · Accepted Answer · 2019-09-11 06:13:20Z

1

You can do with 2 map

const newValues = mainArray.map((item) => {
  if (item.Upperelement1 !== '12345') {
    return item
  }

  return {
      ...item,
      Upperelement2: item.Upperelement2.map(upper => {
        if(upper.Key1 !== 'ok1') {
          return upper 
        }

        return {
          ...upper,
          Key4:'somevalue',
        }
      })
    }
})

answered Sep 11, 2019 at 6:13

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

Comments

Jess · Accepted Answer · 2019-09-11 06:20:47Z

1

I think it's straightforward, using nested map like this

arr.map(function(item){
   if (item.Upperelement1 === '12345'){
        return {
            Upperelement1: item.Upperelement1,
            Upperelement2: item.Upperelement2.map(function(obj){
                if (obj.Key1 === 'ok1'){
                    return Object.assign({}, obj, { Key4: 'somevalue'});
                }
                return obj;
            })
        };
   }
    return item;
})

answered Sep 11, 2019 at 6:20

Jess

6601 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Update an element in an array in React (using filter /map)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related