遍历嵌套数组，通过id查找特定的叶子节点，并将其删除

Question

JSFiddle

I have a nested array with at most 6 levels. The 6th level is called gls , which holds objects of gl s from a database. What I need to do is find a specific gl and remove it from the overall array. I'm able to find the specific element with the following function;

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      node.gls.forEach((gl) => {
        if (gl.id === id) {
          console.log(gl, id);
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

However, I'm struggling to actually remove it from the data array. Trying to get the index by doing data.indexOf(gl) obviously returns -1 as it doesn't search through the nested elements. What's the best way to accomplish this?

 const id = 1000; const data = [{ "id": 1, "name": "Node 1", "children": [{ "id": 2, "name": "Node 1.1", "children": [{ "id": 4, "name": "Node 1.1.1", "leaf": true, "children": [], "gls": [{ "id": 1000, "name": "GL1", "code": "0100" }, { "id": 1001, "name": "GL2", "code": "0200" }] }, { "id": 5, "name": "Node 1.1.2", "leaf": true, "children": [], "gls": [{ "id": 2000, "name": "GL3", "code": "0300" }, { "id": 2001, "name": "GL4", "code": "0400" }] }] }, { "id": 3, "name": "Node 1.2", "children": [{ "id": 6, "name": "Node 1.2.1", "leaf": true, "children": [], "gls": [{ "id": 3000, "name": "GL5", "code": "0500" }, { "id": 3001, "name": "GL6", "code": "0600" }] }] }] }, { "id": 7, "name": "Node 2", "children": [{ "id": 8, "name": "Node 2.1", "children": [{ "id": 9, "name": "Node 2.1.1", "leaf": true, "children": [], "gls": [{ "id": 4000, "name": "GL7", "code": "0700" }, { "id": 4001, "name": "GL8", "code": "0800" }] }] }] } ]; let removeFromData = function(nodes, id) { return nodes.some((node) => { if (node.gls) { node.gls.forEach((gl) => { if (gl.id === id) { document.querySelector('#target').innerText = `found ${gl.name}, ${gl.id} with needle ${id}`; } }); } else if (node.children) { return removeFromData(node.children, id); } }); } removeFromData(data, id); 

 <p id="target"></p> 

Answer 1

forEach passes three arguments to the callback, the second of which is the index of the entry being visited. So you can use that index with splice (if you want to modify in place):

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      node.gls.forEach((gl, index) => {
// -----------------------^^^^^^^
        if (gl.id === id) {
          //console.log(gl, id);
          node.gls.splice(index, 1); // <=== Removes the entry
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

---

I notice you're using some , which suggests you want to stop when you've found the entry and perhaps also return a flag indicating success/failure. If so, I'd use some instead of forEach on the nodes.gls search or possibly use findIndex instead. With some :

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      return node.gls.some((gl, index) => {
        if (gl.id === id) {
          //console.log(gl, id);
          node.gls.splice(index, 1); // <=== Removes the entry
          return true;
        }
      });
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}

With findIndex :

const removeFromData = function(nodes, id) {
  return nodes.some((node) => {
    if (node.gls) {
      const index = node.gls.findIndex((gl) => {
        return gl.id === id;
      });
      if (index === -1) {
        return false;
      }
      node.gls.splice(index, 1);
      return true;
    } else if (node.children) {
      return removeFromData(node.children, id);
    }
  });
}