How can I update such a nested state?

Question

How could I update, for example, the object with key: 1311 and return the updated state? Assuming I don't know its exact location...just its key value.

state = {
  iow: [
    {
      key: 1,
      iow_description: "EARTH WORK",
      unit: null,
      rate: null,
      children: [
        {
          key: 11,
          iow_description: "Sub-head",
          unit: null,
          rate: null
        },
        {
          key: 12,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 121,
              iow_description: "Sub-head",
              unit: "cu.m",
              rate: 100.0
            }
          ]
        },
        {
          key: 13,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 131,
              iow_description: "Sub-head",
              unit: null,
              rate: null,
              children: [
                {
                  key: 1311,
                  iow_description: "Sub-head",
                  unit: "each",
                  rate: 200.0
                },
                {
                  key: 1312,
                  iow_description: "Sub-head",
                  unit: "sq.m",
                  rate: 200.0
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

score 2 · Answer 1 · answered Oct 22 '19 at 22:34

const updateObj = (a, key, newObj) => {
  for (var i in a) {
    const currentObj = a[i];
    if (currentObj.key == key) {
      // Merge old and new data to new object so that change is detected
      a[i] = { ...currentObj, ...newObj }
      return true; // Done
    }
    // Search recursively
    if (updateObj(currentObj.children, key, newObj)) {
      return true;  // Done
    }
  }
}


// Update 'rate' value to 150 on object where key == 1311
updateObj(state['iow'], 1311, { rate: 150 })

@NikitaU. I feel like "key" implies it's unique. But you're correct. — Matt, Oct 22 '19 at 23:23

score 2 · Accepted Answer · answered Oct 22 '19 at 22:37

2

You need recursion

const updateState = (children, key, newData) => {
  return children.map(item => {   
     if(item.children) {
       item.children = updateState(item.children, key, newData);
     }

    return item.key === key ? Object.assign({}, item, newData) : item;
  });
};
state.iow = updateState(state.iow, 131, {iow_description: "new value", rate: 123})

answered Oct 22 '19 at 22:37

Nikita U.

3,540
1
28
37

Perfect! Thanks @nikita-u – Renato G. Nunes Oct 22 '19 at 22:51
yes map works fine too :) but if u don't know where insert the best way is find the parents of . you target if you talk about something choose by click – demopix Oct 22 '19 at 22:59

score 0 · Answer 3 · answered Oct 22 '19 at 21:57

0

you update it like this:

state.iow[0].children[2].children[0].children[0].key = 200000 //update
var getValue = state.iow[0].children[2].children[0].children[0].key; //get the value

answered Oct 22 '19 at 21:57

bill.gates

14,145
3
19
47

...I meant dynamically...Assuming I don't know its exact location. – Renato G. Nunes Oct 22 '19 at 22:08
This might help? You need to recursively loop over the object https://stackoverflow.com/questions/22222599/javascript-recursive-search-in-json-object – Jon B Oct 22 '19 at 22:32

score 0 · Answer 4 · answered Oct 22 '19 at 22:53

var state = {
  iow: [
    {
      key: 1,
      iow_description: "EARTH WORK",
      unit: null,
      rate: null,
      children: [
        {
          key: 11,
          iow_description: "Sub-head",
          unit: null,
          rate: null
        },
        {
          key: 12,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 121,
              iow_description: "Sub-head",
              unit: "cu.m",
              rate: 100.0
            }
          ]
        },
        {
          key: 13,
          iow_description: "Sub-head",
          unit: null,
          rate: null,
          children: [
            {
              key: 131,
              iow_description: "Sub-head",
              unit: null,
              rate: null,
              children: [
                {
                  key: 1311,
                  iow_description: "Sub-head",
                  unit: "each",
                  rate: 200.0
                },
                {
                  key: 1312,
                  iow_description: "Sub-head",
                  unit: "sq.m",
                  rate: 200.0
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};
// you can do this with different methods, u can even target another child doing //each inside each permuthing the key . 
$.each(state.iow[0].children[2].children[0].children[0] ,function(i,v){
$('div').append('<b>'+i+'</b> = '+v+'<br>')
});

// simple target 
console.log(state.iow[0].children[2].children[0].children[0])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> </div>

How can I update such a nested state?

4 Answers4