deleting an element in nested array using filter() function

Question

I have been trying to delete an element with an ID in nested array.

I am not sure how to use filter() with nested arrays.

I want to delete the {id: 111,name: "A"} object only.

Here is my code:

var array = [{
 id: 1,
 list: [{
 id: 123,
 name: "Dartanan"
 }, {
 id: 456,
 name: "Athos"
 }, {
 id: 789,
 name: "Porthos"
 }]
}, {
 id: 2,
 list: [{
 id: 111,
 name: "A"
 }, {
 id: 222,
 name: "B"
 }]
}]
var temp = array
for (let i = 0; i < array.length; i++) {
 for (let j = 0; j < array[i].list.length; j++) {
 temp = temp.filter(function(item) {
 return item.list[j].id !== 123
 })
 }
}
array = temp

Answer 1

You can use the function forEach and execute the function filter for every array list.

var array = [{ id: 1, list: [{ id: 123, name: "Dartanan" }, { id: 456, name: "Athos" }, { id: 789, name: "Porthos" }] }, { id: 2, list: [{ id: 111, name: "A" }, { id: 222, name: "B" }] }];
array.forEach(o => (o.list = o.list.filter(l => l.id != 111)));
console.log(array);

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

To remain the data immutable, use the function map:

var array = [{ id: 1, list: [{ id: 123, name: "Dartanan" }, { id: 456, name: "Athos" }, { id: 789, name: "Porthos" }] }, { id: 2, list: [{ id: 111, name: "A" }, { id: 222, name: "B" }] }],
 result = array.map(o => ({...o, list: o.list.filter(l => l.id != 111)}));
console.log(result);

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

• Tonathiu Redrovan: Not sure what you mean. In the real life i will have dozens of list id's, that is why i was looking to make loops. should i use splice instead? not big fun of splice. Thanks
• georg: There's no need for the second spread, simply {...o, list: o.list.filter etc
• Ele: @georg yes, you're right but I've updated the answer :)
• georg: @Ele: I'm not sure it's better now, because they've tagged with "vue.js" so their data should probably remain immutable.
• Ele: @georg got it, however the OP stated this I want to delete the {id: 111,name: "A"} object only. cause that I've updated the answer.

Answer 2

You could create a new array which contains elements with filtered list property.

const result = array.map(element => (
 {
 ...element,
 list: element.list.filter(l => l.id !== 111)
 }
));

You can use Object.assign if the runtime you are running this code on does not support spread operator.

Answer 3

Array.filter acts on elements:

var myArray = [{something: 1, list: [1,2,3]}, {something: 2, list: [3,4,5]}]
var filtered = myArray.filter(function(element) {
 return element.something === 1;
 // true = keep element, false = discard it
})
console.log(filtered); // logs [{something: 1, list: [1,2,3]}]

You can use it like this:

var array = [{
 id: 1,
 list: [{
 id: 123,
 name: "Dartanan"
 }, {
 id: 456,
 name: "Athos"
 }, {
 id: 789,
 name: "Porthos"
 }]
}, {
 id: 2,
 list: [{
 id: 111,
 name: "A"
 }, {
 id: 222,
 name: "B"
 }]
}]
for (var i = 0; i < array.length; ++i) {
 var element = array[i]
 
 // Filter the list
 element.list = element.list.filter(function(listItem) {
 return listItem.id !== 111 && listItem.name !== 'A';
 })
}
console.log(array)

• Tonathiu Redrovan: very elegant! thank you!!! for (var i = 0; i < array.length; ++i) { var element = array[i] // Filter the list element.list = element.list.filter(function(listItem) { return listItem.id !== 111 && listItem.name !== 'A'; }) }