Comment puis-je supprimer un élément d'une liste, avec lodash?

166

J'ai un objet qui ressemble à ceci:

var obj = {
    "objectiveDetailId": 285,
    "objectiveId": 29,
    "number": 1,
    "text": "x",
    "subTopics": [{
        "subTopicId": 1,
        "number": 1
    }, {
        "subTopicId": 2,
        "number": 32
    }, {
        "subTopicId": 3,
        "number": 22
    }]
}
var stToDelete = 2;

J'ai lodashinstallé dans mon application pour d'autres choses. Existe-t-il un moyen efficace lodashde supprimer l'entrée: {"subTopicId":2, "number":32}de l' objobjet?

Ou existe-t-il un moyen javascript de le faire?

javascript arrays object lodash Samantha JT Star
la source
1
vous pouvez simplement utiliser splice( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ) pour supprimer un élément d'une liste
z33m
1
Le titre a été modifié car la suppression de 4 d'un tableau [1,4,5] ne peut pas être effectuée de cette façon. Oui, je comprends que les tableaux peuvent être implémentés à partir du hachage / objet et le sont probablement, mais il y a une différence subtile entre ces deux. Pour supprimer d'un tableau que vous utiliseriez result = _.pull(arr, value) Cela supprimera toutes les valeurs correspondantes de la liste.
boatcoder

Réponses:

248

Comme Lyyons l'a souligné dans les commentaires, une manière plus idiomatique et lodash de le faire serait d'utiliser _.remove, comme ceci

_.remove(obj.subTopics, {
    subTopicId: stToDelete
});

En dehors de cela, vous pouvez passer une fonction de prédicat dont le résultat sera utilisé pour déterminer si l'élément actuel doit être supprimé ou non.

_.remove(obj.subTopics, function(currentObject) {
    return currentObject.subTopicId === stToDelete;
});

Vous pouvez également créer un nouveau tableau en filtrant l'ancien avec _.filteret en l'affectant au même objet, comme ceci

obj.subTopics = _.filter(obj.subTopics, function(currentObject) {
    return currentObject.subTopicId !== stToDelete;
});

Ou

obj.subTopics = _.filter(obj.subTopics, {subTopicId: stToKeep});
thefourtheye
la source
3
La raison pour laquelle cette réponse est géniale est que vous pouvez utiliser une fonction de prédicat , ce qui est exactement ce que je recherchais. Supprimer un élément est trivial si vous connaissez l'index, mais qu'en est-il lorsque vous ne connaissez pas l'index?
random_user_name
3
Cela vaut peut-être la peine de mentionner _.filter si vous ne voulez pas muter le tableau d'origine ....
random_user_name
@cale_b Merci :-) Mise à jour de la réponse avec la _.filterversion.
thefourtheye
7
@thefourtheye _.filter renvoie un élément si le prédicat est vrai. Votre implémentation renverra tous les éléments indésirables au lieu de ceux que vous souhaitez conserver
Xeltor
5
@thefourtheye vous devriez utiliser _.rejectau lieu de _.filterpour utiliser le même prédicat. Vérifiez ma réponse pour plus de détails!
Xeltor
29

Utilisez simplement la vanille JS. Vous pouvez utiliser splicepour supprimer l'élément:

obj.subTopics.splice(1, 1);

Démo

Andy
la source
3
l'utilisateur demandeIs there an efficient way to use _lodash to delete
semirturgay
7
@Andy Vous avez raison, mais que faire si l'index n'est pas déjà connu?
thefourtheye
3
splice () est la meilleure approche si vous voulez que votre tableau soit muté. Si vous utilisez remove, il renvoie le nouveau tableau et celui-ci doit être réaffecté.
omarjebari
Si vous souhaitez supprimer un élément d'un tableau par son index dans le tableau (évidemment, vous avez cet index si vous souhaitez effectuer l'action de suppression de cette manière), alors utiliser la méthode splice est le moyen le plus efficace (et le plus simple) pour le faire. Pas besoin de comparer quoi que ce soit et de rendre le code plus compliqué et vulnérable aux bugs et erreurs ...
TheCuBeMan
26

vous pouvez le faire avec _pull.

_.pull(obj["subTopics"] , {"subTopicId":2, "number":32});

vérifier la référence

semirturgay
la source
7
Selon la documentation, _.pullutilise une égalité stricte pour les comparaisons, c'est-à-dire === . Deux objets simples différents ne seront jamais comparés comme égaux par ===(ou par ==d'ailleurs). Ainsi, votre code ci-dessus ne supprimera jamais aucun élément du tableau.
Mark Amery
1
Pourtant, c'est le seul qui fonctionne avec des chaînes dans un tableau. _.removepurge juste le tableau.
Yauheni Prakopchyk
3
Je pense toujours que c'est la bonne réponse. JS .filter supprime tous les éléments correspondants, JS .splice nécessite que je connaisse l'index, _.remove itère sur tous les éléments du tableau étant ainsi moins efficace. _.pull est exactement ce que je veux: _.pull (array, itemToRemove).
Judah Gabriel Himango
21

Vous pouvez maintenant utiliser _.reject qui vous permet de filtrer en fonction de ce dont vous devez vous débarrasser, au lieu de ce que vous devez conserver.

contrairement _.pullou _.removequi ne fonctionnent que sur les tableaux, ._rejecttravaille sur tout Collection

obj.subTopics = _.reject(obj.subTopics, (o) => {
  return o.number >= 32;
});
Xeltor
la source
2

Il y a quatre façons de faire cela comme je le sais

const array = [{id:1,name:'Jim'},{id:2,name:'Parker'}];
const toDelete = 1;

La première:

_.reject(array, {id:toDelete})

Le second est:

_.remove(array, {id:toDelete})

De cette façon, le tableau sera muté.

Le troisième est:

_.differenceBy(array,[{id:toDelete}],'id')
// If you can get remove item 
// _.differenceWith(array,[removeItem])

Le dernier est:

_.filter(array,({id})=>id!==toDelete)

j'apprends lodash

Répondez pour faire un enregistrement, afin que je puisse le retrouver plus tard.

mqliutie
la source
Je cherchaisreject
Sampgun le
2

En plus de la réponse @thefourtheye, en utilisant un prédicat au lieu des fonctions anonymes traditionnelles:

  _.remove(obj.subTopics, (currentObject) => {
        return currentObject.subTopicId === stToDelete;
    });

OU

obj.subTopics = _.filter(obj.subTopics, (currentObject) => {
    return currentObject.subTopicId !== stToDelete;
});
Pranav Singh
la source
1

lodash et dactylographié

const clearSubTopics = _.filter(obj.subTopics, topic => (!_.isEqual(topic.subTopicId, 2)));
console.log(clearSubTopics);
Uliana Pavelko
la source
0

Voici la fonction lodash simple avec tableau et la suppression avec le numéro d'index.

index_tobe_delete = 1

fruit = [{a: "apple"}, {b: "banana"}, {c: "choco"}]
_.filter(fruit, (value, key)=> {
return (key !== index_tobe_delete)
})
Anupam Maurya
la source