Search code examples
javascriptloopsrecursionnestedtraversal

Javascript update values in nested object by array path


Given the nested object:

{
    name: 'UK',
    toggled: false,
    active: false,
    children: [{
            name: 'Region 1',
            active: false,
            toggled: false,
            children: [{
                    name: 'Heathrow T1',
                    toggled: false,
                    active: false,
                    children: []
                },
                {
                    name: 'HTT',
                    toggled: false,
                    active: false,
                    children: []
                },
            ]
        },
        {
            name: 'Region 2',
            active: false,
            toggled: false,
            children: [{
                name: Gatwick North,
                active: false,
                toggled: false,
                children: []
            }]
        }
    ]
}

and the given path

['UK', 'Region 2', 'Gatwick North']

how can I manage to add active/toggled properties to true for the path in the nested object matching the above array.

The output should be the following:

{
    name: 'UK',
    toggled: true,
    active: true,
    children: [{
            name: 'Region 1',
            active: false,
            toggled: false,
            children: [{
                    name: 'Heathrow T1',
                    toggled: false,
                    active: false,
                    children: []
                },
                {
                    name: 'HTT',
                    toggled: false,
                    active: false,
                    children: []
                },
            ]
        },
        {
            name: 'Region 2',
            active: true,
            toggled: true,
            children: [{
                name: 'Gatwick North',
                active: true,
                toggled: true,
                children: []
            }]
        }
    ]
}

I was trying to implement this with recursion with no success so far. I was searching through questions and none of them matched my current situation.


Solution

  • simple example of using recursion, explanations are in code as comments

    const obj = {name: 'UK',toggled: false,active: false,children: [{name: 'Region 1',active: false,toggled: false,children: [{name: 'Heathrow T1',toggled: false,active: false,children: []},{name: 'HTT',toggled: false,active: false,children: []},]},{name: 'Region 2',active: false,toggled: false,children: [{name: 'Gatwick North',active: false,toggled: false,children: []}]}]};
    
    const checkAndChange = (obj) => { // function that will check if name exists in array and change toggle and active properties
      const arr = ['UK', 'Region 2', 'Gatwick North'];
      if (arr.includes(obj.name)) {
        obj.toggled = true;
        obj.active = true;
      }
    }
    
    const recursion = (obj) => {
       const o = obj;
       checkAndChange(o); // check if name exists in array and change toggle and active properties
       if (o.children.length > 0) { // check if has children
       		o.children.forEach(v => { // if has children do the same recursion for every children
          	recursion(v);
          });
       }
       return o; // return final new object
    }
    
    console.log(recursion(obj));
    .as-console-wrapper { max-height: 100% !important; top: 0; }