How to navigate a dynamic javascript tree by setting the value of its properties?

Asked

Viewed 257 times

2

Good evening, I own the following tree defined by JSON:

  [
       {
          "roleName":"CCA",
          "children":[
             {
                "roleName":"Data_Final_Índices_CCA",
                "$$hashKey":"object:2183",
                "children":[
                   {
                      "roleName":"Datas_Índices_CCA",
                      "$$hashKey":"object:2192"
                   }
                ],
                "collapsed":true
             },
             {
                "roleName":"Data_Inicial_Índices_CCA",
                "$$hashKey":"object:2184",
                "children":[
                   {
                      "roleName":"Datas_Índices_CCA",
                      "$$hashKey":"object:2195"
                   }
                ],
                "collapsed":true
             },
             {
                "roleName":"IGPM",
                "$$hashKey":"object:2185"
             }
          ],
          "$$hashKey":"object:2179",
          "collapsed":true
       }
    ]

Each "father" knot can have n children and all children can have other children.

I need to set the value "false" on all nodes with the property "collapsed", for this I need to go through all nodes, how can I do this using some Javascript function? The tree has no fixed knot size and quantity.

javascript json

  • Edit the question and ask a [mcve] with your attempt to address the problem. Attach the error messages and try to highlight in which line you think the code is giving error.

1 answer

2

The simplest way is to convert this object into String and change the text with a Regexp. Have the added advantage of not changing the initial object.

const obj = [{
  "roleName": "CCA",
  "children": [{
      "roleName": "Data_Final_Índices_CCA",
      "$$hashKey": "object:2183",
      "children": [{
        "roleName": "Datas_Índices_CCA",
        "$$hashKey": "object:2192"
      }],
      "collapsed": true
    },
    {
      "roleName": "Data_Inicial_Índices_CCA",
      "$$hashKey": "object:2184",
      "children": [{
        "roleName": "Datas_Índices_CCA",
        "$$hashKey": "object:2195"
      }],
      "collapsed": true
    },
    {
      "roleName": "IGPM",
      "$$hashKey": "object:2185"
    }
  ],
  "$$hashKey": "object:2179",
  "collapsed": true
}];

const modificado = JSON.parse(JSON.stringify(obj).replace(/"collapsed":true/g, '"collapsed":false'));

console.log(modificado);

The most complex way is to create a recursive function that looks for these keys and changes the value. The problem this can generate is to change the object internally and if that object is used in another code it is not what is expected. You can always create a copy with JSON.parse(JSON.stringify(obj));.

const obj = [{
  "roleName": "CCA",
  "children": [{
      "roleName": "Data_Final_Índices_CCA",
      "$$hashKey": "object:2183",
      "children": [{
        "roleName": "Datas_Índices_CCA",
        "$$hashKey": "object:2192"
      }],
      "collapsed": true
    },
    {
      "roleName": "Data_Inicial_Índices_CCA",
      "$$hashKey": "object:2184",
      "children": [{
        "roleName": "Datas_Índices_CCA",
        "$$hashKey": "object:2195"
      }],
      "collapsed": true
    },
    {
      "roleName": "IGPM",
      "$$hashKey": "object:2185"
    }
  ],
  "$$hashKey": "object:2179",
  "collapsed": true
}];

function recursiveSetter(obj, key, newValue) {
  if (typeof obj !== 'object') return;
  Object.keys(obj).forEach(k => {
    if (k === key) {
      obj[key] = newValue;
    } else {
      if (typeof obj[k] === 'object') {
        recursiveSetter(obj[k], key, newValue);
      }
    }
  });
}

recursiveSetter(obj, 'collapsed', false);

console.log(obj);

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.