using .filter to delete an item from an array of objects with react/javascript

Question

I am using .filter function of javascript to delete an element by it's ID in TypeMp3List from this array of objects. The format is like this :

The format I want to get after doing the filter when deleting for example the MP3 with ID:33390 is this :

This is the code I've built so far :

  showDeleteConfirmation(value, id, index, thisHandler) {
    confirm({
      title: 'Voulez vous supprimer cette audio ?',
      content: '',
      okText: 'Oui, je confirme',
      okType: 'danger',
      cancelText: 'Non',
      onOk() {
       deleteMp3Request(id);
       var { extraitMP3 } = thisHandler.state;

        var array = [];
        for (var key in extraitMP3) {
          array.push(extraitMP3[key]);
        }
        console.log('array',array)

        const result = array.map(d => ({ 
          ...d, 
          TypeMp3List: 
              Object.fromEntries(
                Object.entries(d.TypeMp3List).filter(index => index !== id)
              ) 
        }))
        console.log('result',result)


       thisHandler.setState({result: result})
       NotificationManager.success("le fichier audio est supprimé avec succès !", "");
     },
     onCancel() {
     },
    });  
  }

Problem is after mapping and filtering the console.log(result) is giving me the same results of console.log(array). It looks like there is something wrong with the mapping and filtering and don't know exactly whats is it. any help would be appreciated.

@JackBashford Id is passed in

Sasha
– Sasha

2019-06-28 13:53:20 +00:00
Commented Jun 28, 2019 at 13:53 — Sasha
– Sasha, Commented Jun 28, 2019 at 13:53
What does id in showDeleteConfirmation params mean?

Diamond
– Diamond

2019-06-28 14:24:34 +00:00
Commented Jun 28, 2019 at 14:24 — Diamond
– Diamond, Commented Jun 28, 2019 at 14:24

Jack Bashford · Accepted Answer · 2019-06-28 13:59:37Z

3

Because you use Object.entries - this returns a two-dimensional array (e.g. an array containing arrays), and within your filter you're checking if each array is equal to a number. It isn't. You want to access the first element of this array - so either a little destructuring:

Object.entries(d.TypeMp3List).filter(([index]) => index !== id)

Or more verbose array notation:

Object.entries(d.TypeMp3List).filter(index => index[0] !== id)

edited Jun 28, 2019 at 13:59

answered Jun 28, 2019 at 13:55

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

1 Comment

Ahmed Over a year ago

you're right about that but I am still getting the same results in both console logs. To mention that the delete is working correctly

Julliano Osorio · Accepted Answer · 2019-06-28 14:00:49Z

0

since you want a new array based on .filter verification, try returning the result of what you are comparing:

Object.fromEntries(
    Object.entries(d.TypeMp3List).filter((index) => {
        return index !== id
    )};
)

answered Jun 28, 2019 at 14:00

Julliano Osorio

3051 silver badge4 bronze badges

Comments

Diamond · Accepted Answer · 2019-06-28 14:28:31Z

0

I think you made a mistake in using filter function.

In my opinion, you can pass each item to filter function and use its id to compare with filterId.

showDeleteConfirmation(value, filterId, index, thisHandler) {
...
   Object.entries(d.TypeMp3List).filter(listItem => listItem.id !== filterId)
...

edited Jun 28, 2019 at 14:28

answered Jun 28, 2019 at 14:09

Diamond

3,4904 gold badges21 silver badges43 bronze badges

1 Comment

Ahmed Over a year ago

this is not the problem I changed according to what you've said and nothing happened.

Collectives™ on Stack Overflow

using .filter to delete an item from an array of objects with react/javascript

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related