supprimer des objets du tableau par propriété d'objet

Question

var listToDelete = ['abc', 'efg'];

var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}] // all that should remain

Comment supprimer un objet du tableau en faisant correspondre la propriété de l'objet ?

Uniquement du JavaScript natif, s'il vous plaît.

J'ai des difficultés à utiliser l'épissage car la longueur diminue avec chaque délétion. L'utilisation du clone et de l'épissage sur l'index original vous laisse toujours avec le problème de la diminution de la longueur.

Answer 1

Vérifiez cela en utilisant Set et le filtre ES5.

  let result = arrayOfObjects.filter( el => (-1 == listToDelete.indexOf(el.id)) );
  console.log(result);

Voici JsFiddle : https://jsfiddle.net/jsq0a0p1/1/

Answer 2

Si vous voulez simplement le supprimer du tableau existant et ne pas en créer un nouveau, essayez :

var items = [{Id: 1},{Id: 2},{Id: 3}];
items.splice(_.indexOf(items, _.find(items, function (item) { return item.Id === 2; })), 1);

Answer 3

Boucle en sens inverse en décrémentant i pour éviter le problème :

for (var i = arrayOfObjects.length - 1; i >= 0; i--) {
    var obj = arrayOfObjects[i];

    if (listToDelete.indexOf(obj.id) !== -1) {
        arrayOfObjects.splice(i, 1);
    }
}

Ou utilisez filter :

var newArray = arrayOfObjects.filter(function(obj) {
    return listToDelete.indexOf(obj.id) === -1;
});

Answer 4

Uniquement du JavaScript natif, s'il vous plaît.

Comme solution alternative, plus "fonctionnelle", fonctionnant sur ECMAScript 5, vous pourriez utiliser :

var listToDelete = ['abc', 'efg'];
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}]; // all that should remain

arrayOfObjects.reduceRight(function(acc, obj, idx) {
    if (listToDelete.indexOf(obj.id) > -1)
        arrayOfObjects.splice(idx,1);
}, 0); // initial value set to avoid issues with the first item and
       // when the array is empty.

console.log(arrayOfObjects);
[ { id: 'hij', name: 'ge' } ]

Selon la définition de "Array.prototype.reduceRight" dans l'ECMA-262 :

reduceRight ne modifie pas directement l'objet sur lequel il est appelé. mais l'objet peut être muté par les appels à callbackfn .

Il s'agit donc d'une utilisation valide de reduceRight .

Answer 5

var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
                      {id:'efg',name:'em'}, // delete me
                      {id:'hij',name:'ge'}] // all that should remain

Selon votre réponse, ce sera comme suit : lorsque vous cliquez sur un objet particulier, envoyez l'index dans le paramètre de la fonction "delete me". Ce code simple fonctionnera comme un charme.

function deleteme(i){
    if (i > -1) {
      arrayOfObjects.splice(i, 1);
    }
}