How to map an array and delete the corresponding one-CodePudding

I have an array called responseData, it serves for me to show the available card options on the screen

public responseData = [
{
  id: 1399,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO ',
  validade: '2029-05-01',
},
{
  id: 13932,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO  L',
  validade: '2029-05-01',
},
{
  id: 139429,
  pessoa_id: 75898,
  created_at: '2022-11-08T16:59:59.000000Z',
  holder: 'LEONARDO SILVA DE L',
  validade: '2029-05-01',
},
];

In this case the user will click on a card, when he clicks I put the object of the card he clicked on in another variable called

    this.cardDelete = card;

So it has the option to delete this card, I would like to know a way that I could map the id of the cardDelete and set to null the responseData with the corresponding id

Here's an example I did on stackblitz

I put some instructions in the html

https://stackblitz.com/edit/angular-wzxnpe?file=src/app/app.component.html

CodePudding user response：

What are you searching for is something like that:

    this.responseData = this.responseData.filter(
      (card) => card.id != this.cardDelete.id
    );

In stackblitz your example: https://stackblitz.com/edit/angular-xkikgw

CodePudding user response：

Using .map function

this.responseData.map((data) => {
  if (data.id == this.cardDelete.id) return null;
  return data;
});

look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map