Javascript通过数组路径更新嵌套对象中的值

Question

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.

Answer 1

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; }

Answer 2

Use recursive method to find the path and update the value.

 var 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: []}]}]}]; function FilterArray(temp2,i){ temp2.filter(function(el){ if(el['name']==path[i]){ el['toggled']=true; el['active']=true; if(i!=path.length-1){ FilterArray(el['children'],++i); } } }); } console.log("Before"); console.log(obj); var path=['UK', 'Region 2', 'Gatwick North']; FilterArray(obj,0); console.log("After"); console.log(obj);

Answer 3

Based on this answer on a very similar question :

function deep_value(obj, path){
    for (var i=0; i<path.length; i++){
        obj = obj[path[i]];
    };
    return obj;
};

Use it like this:

var obj = {
  foo: { bar: 'baz' }
};

alert(deep_value(obj, ['foo','bar'])); // alerts "baz"

Extra : the same function can also be used for arrays

var arr = [
  ['item 0.0', 'item 0.1'],
  ['item 1.0', 'item 1.1'],
  ['item 2.0', 'item 2.1'],
]
console.log(deep_value(arr, [2,1])); // logs "item 2.1"

Codepen

Answer 4

This will work for nested arrays.

parameters:
- array : array to update
- path : what to update ( [0] - array[0], [2,1] - array[2][1], etc. )
- data : data to assign

    function updateArray(array, path, data) {
        const index = path.shift();
        if (path.length) {
            if (!Array.isArray(array[index])) {
                array[index] = [];
            }
            updateArray(array[index], path, data);
        } else {
            array[index] = data;
        }
    }