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

Ele · Accepted Answer · 2018-03-10 22:15:21Z

2

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; }

edited Mar 10, 2018 at 22:15

answered Mar 10, 2018 at 21:50

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

5 Comments

Tonathiu Redrovan Over a year ago

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 Over a year ago

There's no need for the second spread, simply {...o, list: o.list.filter etc

Ele Over a year ago

@georg yes, you're right but I've updated the answer :)

georg Over a year ago

@Ele: I'm not sure it's better now, because they've tagged with "vue.js" so their data should probably remain immutable.

Ele Over a year ago

@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.

Lucas Lago · Accepted Answer · 2018-03-10 22:19:39Z

1

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.

answered Mar 10, 2018 at 22:19

Lucas Lago

1466 bronze badges

Comments

Marco · Accepted Answer · 2018-03-10 22:05:11Z

0

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)

edited Mar 10, 2018 at 22:05

answered Mar 10, 2018 at 21:56

Marco

7,2863 gold badges22 silver badges56 bronze badges

1 Comment

Tonathiu Redrovan Over a year ago

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'; }) }

Collectives™ on Stack Overflow

deleting an element in nested array using filter() function

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related