Navigating a nested javascript object dynamically using an array of indexes as a path

Question

I have a Json file with an unknown depth of nested children, and i need to read that with javascript, and delete an element somewhere within the object. I have the path of the child to delete stored in an array called nestPath (example [0,0,3] where the path would be [0]->[0]->[3]). The problem is that i do not know how to dynamically target the object directly without using a variable to reference the Json object, but if i try to delete the variable it will only delete the reference, not the actual object within the Json.

I would like to dynamically access it with the path given by nestPath so that with an input of [0,1,2,3], i would be able to access: jsonObject[0][1][2][3] without using a variable, so that i can delete it.

The code i tried:

var nestPath = [0,0,1];
var stateObject = menuToolState['menu'];
for (var i = 0; i < nestPath.length; i++) {
    if (i > 0) {
        stateObject = stateObject['links'][nestPath[i]];
    } else {
        stateObject = stateObject[nestPath[i]];
    }
}

delete stateObject;

menuToolState:

{
  "menu": [
    {
      "name": "0",
      "links": [
        {
          "name": "0-0",
          "links": [
            {
              "name": "0-0-0",
              "links": []
            },
            {
              "name": "0-0-1 (delete this)",
              "links": []
            }
          ]
        }
      ]
    }
  ]
}

With this code i am able to access the information within the object, but i am not able to delete it as delete just deletes the reference. How can i achieve this?

You say that the depth of the nesting is indefinite, but here you only go one level deep. It might help if you also provided a couple of examples of what `menuToolState` could look like — Explosion Pills, Aug 14 '20 at 20:05
@ExplosionPills Thank you. I updated my post to include examples of menuToolState. The nesting can be indefinitely deep, but the depth doesn't really matter since i already have the nestPath. The structure remains the same, where the children should be in an array named 'links'. — Albin Lennstrand, Aug 14 '20 at 20:15

score 1 · Answer 1 · answered Aug 14 '20 at 20:20

Right, so to delete a property on an object you need to call delete on the direct holder of that property. E.g. if you want to delete a property ['nestedProp'] inside an object

{prop1: {prop2: {nestedProp: 'hello'}}}

you need to keep a reference to the actual object holding it. Which will be obj['prop1']['prop2'].

const someNestedObj = {
  prop1: {
    prop1_1: {nested1: 'hello'}
  },
  prop2: {
    prop2_1: {nested1: 'world'}
  }
};

function deleteProp(obj, propPath) {
  let curObj = obj;
  let parentObj = obj;
  for (let prop of propPath) {
    parentObj = curObj;
    curObj = curObj && curObj[prop];
  }
  
  if (propPath[propPath.length - 1] in parentObj) {
    delete parentObj[propPath[propPath.length - 1]];
  } else {
    throw new Error('No such property');
  }
}

deleteProp(someNestedObj, ['prop1', 'prop1_1', 'nested1'])
console.log(someNestedObj);

Navigating a nested javascript object dynamically using an array of indexes as a path

1 Answers1