How to remove ids from array

Question

I am trying through the array and use a Array.prototype.filter() method on every children array to find the elements whose key matches with the ones specified.

Then, I'am using Array.prototype.splice() to remove the results from the respective children array but the result is return undefined .

 const inputArray = [ "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197", ]; const originalArray = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec", }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01", }, ], }, ], }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4", }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7", }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", }, ], }, ], }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6", }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f", }, ], }, ], }, ]; console.log( " ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray", originalArray.forEach(e => { e.children.forEach((c, i) => { if (inputArray.includes(c.key)) { e.children.splice(i, 1); } else { c.children.forEach((cc, j) => { if (inputArray.includes(cc.key)) { c.children.splice(j, 1); } }); } }); }) );

Note: For example in the Elements => 5e69dbd7-5fee-67a9-c73f-4656f9b90715 children Non metals => 633ac872e78fa7ebee03b8bf i am only remove object with this key => Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb I want to keep the other objects that were not found this also applies to for example Composition => 63b3d5cd12c06ba7ce353f76 or Pl.nets => 33a3182b-93a4-84b9-4c49-c955a8416197 .

Answer 1

You need to iterate from the end of the array, because splice changes index for the followind item.

 const keys = ["Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197"], data = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec" }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01" }] }] }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4" }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7" }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb" }] }] }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6" }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f" }] }] }], remove = keys => { const fn = array => { let i = array.length; while (i--) { if (keys.includes(array[i].key)) array.splice(i, 1); else if (array[i].children) fn(array[i].children); } }; return fn; }; remove(keys)(data); console.log(data);

 .as-console-wrapper { max-height: 100%;important: top; 0; }

Answer 2

Since you want to preserve the original object references it will be slightly less efficient, but here's a way you can do it with recursive function calls. It provides the same output as your code, but it's correctly logging the final structure whereas yours is logging the return value of .forEach() which is undefined, by design.

 const inputArray = [ "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197", ]; const originalArray = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec", }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01", }, ], }, ], }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4", }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7", }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", }, ], }, ], }, { title: "Pl.nets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian pl.net", key: "Chthonian pl.net-b3c593c1-d29e-5e14-1b11-2241e8ef2be6", }, { title: "Carbon pl.net", key: "Carbon pl.net-07d67d62-afcf-fbcf-a8e8-75081cb44c2f", }, ], }, ], }, ]; function filterChildrenById (item, ids) { if (item.children) { for (let i = 0; i < item.children.length; i++) { let child = item.children[i]; if (ids.includes(child.key)) { item.children.splice(i, 1); // Reduce index because we removed an item so indexing will // be off if we don't do this i--; } else if (Array.isArray(child.children)) { child = filterChildrenById(child, ids); } } } return item; } function filterData(data, ids) { data.forEach(item => filterChildrenById(item, ids)) return data; } console.log( " ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray", filterData(originalArray, inputArray) );