Delete an element in nested array

Question

I have this structure in my JavaScript:

"treeData": [
  {
    "id": 29,
    "name": "Root",
    "children": [
      {
        "id": 30,
        "name": "Sub-Root",
        "children": [
          {
            "id": 31,
            "name": "Sub-Sub-Root"
          }
        ]
      }
    ]
  },
  {
    "id": 32,
    "name": "Root 2"
  }
]

I would like to remove, for example, object with ID 30 (so «Sub-Root» and its children «Sub-Sub-Root»).

Currently, I am working with this recursive method:

for (let i = 0; i < this.treeData.length; i++) {
    this.findNested(this.treeData[i], this.selected.id); // ID is string like «30»
}

 findNested = function (obj, value) {
    if (obj.id === value) {
        // delete not working
        //delete obj;
        obj = null; // Setting to null to delete
        console.log('Passed');
    }
    if (obj && obj.children && obj.children.length > 0) {
        for (let j = 0; j < obj.children.length; j++) {
            this.findNested(obj.children[j], value);
        }
    }
}

The problem is, even I set obj to null, my treeData object is not affected and I don't get why.

My question is: how can I remove and element (and all its sub-elements) from my treeData knowing only the value of the "id" element ?

try splice on treeData

Punith Jain
– Punith Jain

2018-02-07 06:41:00 +00:00
Commented Feb 7, 2018 at 6:41 — Punith Jain
– Punith Jain, Commented Feb 7, 2018 at 6:41
treedata is an array

connexo
– connexo

2018-02-07 06:41:57 +00:00
Commented Feb 7, 2018 at 6:41 — connexo
– connexo, Commented Feb 7, 2018 at 6:41

Skyler · Accepted Answer · 2018-02-07 06:57:21Z

3

I have changed your code a litle bit, you have to keep track of the parent array and use Array.prototype.splice() to delete, take a look below,

for (let i = 0; i < this.treeData.length; i++) {
    this.findNested(this.treeData[i], this.treeData, this.selected.id, i); // ID is string like «30»
}

findNested = function (obj, parent, value, i) {
    if (obj.id === value) {
        parent.splice(i,1)
    }
    if (obj && obj.children && obj.children.length > 0) {
        for (let j = 0; j < obj.children.length; j++) {
            this.findNested(obj.children[j], obj.children, value, j);
        }
    }
}

answered Feb 7, 2018 at 6:57

Skyler

6565 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StepUp Over a year ago

man, you are awesome! Thank you very much! Have a nice day! It is cool! :)

connexo · Accepted Answer · 2018-02-07 06:55:11Z

Do the deleting using Array.prototype.splice() in your for-iteration. Make your findNested function only return the information if you found the match you were looking for.

for (let i = 0; i < treeData.length; i++) {
    if (findNested(treeData[i], selected.id)) {
        treeData.splice(i, 1);
    }
}

function findNested (obj, value) {
    let found = false;
    if (obj.id === value) {
        found = true        
    } else {
        if (obj && obj.children && obj.children.length > 0) {
            for (let j = 0; j < obj.children.length; j++) {
                findNested(obj.children[j], value);
            }
        }
    }
    return found;
}

Suttikeat Witchayakul · Accepted Answer · 2018-02-07 06:46:29Z

1

The obj is passed in findNested by value not by reference, So everything you do with obj in the function will not affect the this.treeData.

answered Feb 7, 2018 at 6:46

Suttikeat Witchayakul

1871 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Delete an element in nested array

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related