web-dev-qa-db-fra.com

javascript rechercher et supprimer un objet dans un tableau en fonction de la valeur de la clé

J'ai essayé plusieurs approches pour trouver un objet dans un tableau, où ID = var et, le cas échéant, supprimer l'objet du tableau et retourner le nouveau tableau d'objets.

Les données: 

[
    {"id":"88","name":"Lets go testing"},
    {"id":"99","name":"Have fun boys and girls"},
    {"id":"108","name":"You are awesome!"}
]

Je suis capable de rechercher le tableau en utilisant jQuery $ grep;

var id = 88;

var result = $.grep(data, function(e){ 
     return e.id == id; 
});

Mais comment puis-je supprimer l'objet entier lorsque id == 88 et renvoyer des données comme ceci:

Les données: 

[
    {"id":"99","name":"Have fun boys and girls"},
    {"id":"108","name":"You are awesome!"}
]
javascriptjqueryarraysobject
100
Tom

Je peux grep le tableau pour l'id, mais comment puis-je supprimer l'objet entier où id == 88

Filtrez simplement par le prédicat opposé:

var data = $.grep(data, function(e){ 
     return e.id != id; 
});
122
Bergi

voici une solution si vous n’utilisez pas jquery:

myArray = myArray.filter(function( obj ) {
  return obj.id !== id;
});
77
iMad

Vous pouvez simplifier cela, et il n’est vraiment pas nécessaire d’utiliser jquery ici.

var id = 88;

for(var i = 0; i < data.length; i++) {
    if(data[i].id == id) {
        data.splice(i, 1);
        break;
    }
}

Il suffit de parcourir la liste, de trouver l'identifiant, l'épissure, puis de rompre pour sortir de la boucle.

75
Bryan

Il existe une nouvelle méthode pour ce faire dans ES6/2015 à l'aide de findIndex et de l'opérateur d'étalement de tableau:

const index = data.findIndex(obj => obj.id === id);
const newData = [
    ...data.slice(0, index),
    ...data.slice(index + 1)
]

Vous pouvez le transformer en une fonction pour une réutilisation ultérieure comme ceci:

function remove(array, key, value) {
    const index = array.findIndex(obj => obj[key] === value);
    return index >= 0 ? [
        ...array.slice(0, index),
        ...array.slice(index + 1)
    ] : array;
}

De cette façon, vous pouvez supprimer des éléments avec différentes clés en utilisant une méthode (et si aucun objet ne répond aux critères, vous obtenez le tableau d'origine renvoyé):

const newData = remove(data, "id", "88");
const newData2 = remove(data, "name", "You are awesome!");

Ou vous pouvez le mettre sur votre Array.prototype:

Array.prototype.remove = function (key, value) {
    const index = this.findIndex(obj => obj[key] === value);
    return index >= 0 ? [
        ...this.slice(0, index),
        ...this.slice(index + 1)
    ] : this;
};

Et utilisez-le de cette façon:

const newData = data.remove("id", "88");
const newData2 = data.remove("name", "You are awesome!");
9
zorza

En supposant que les identifiants soient uniques et qu'il ne vous reste plus qu'à supprimer l'élément splice devrait suffire:

var data = [
{"id":"88","name":"Lets go testing"},
{"id":"99","name":"Have fun boys and girls"},
{"id":"108","name":"You are awesome!"}
],
id = 88;

console.table(data);

$.each(data, function(i, el){
    if (this.id == id){
        data.splice(i, 1);
    }
});

console.table(data);
8
James Hibbard

Peut-être recherchez-vous la fonction $.grep():

arr = [
  {"id":"88","name":"Lets go testing"},
  {"id":"99","name":"Have fun boys and girls"},
  {"id":"108","name":"You are awesome!"}
];

id = 88;
arr = $.grep(arr, function(data, index) {
   return data.id != id
});
4
Rafael Garcia

sift est un filtre de collection puissant pour des opérations comme celle-ci et beaucoup plus avancées. Cela fonctionne côté client dans le navigateur ou le côté serveur dans node.js.

var collection = [
    {"id":"88","name":"Lets go testing"},
    {"id":"99","name":"Have fun boys and girls"},
    {"id":"108","name":"You are awesome!"}
];
var sifted = sift({id: {$not: 88}}, collection);

Il supporte des filtres comme $in, $nin, $exists, $gte, $gt, $lte, $lt, $eq, $ne, $mod, $all, $and, $or, $nor, $not, $size, $type et $regex, et s'efforce d'être compatible avec les API avec le filtrage de la collection MongoDB.

3
Redsandro
var items = [
  {"id":"88","name":"Lets go testing"},
  {"id":"99","name":"Have fun boys and girls"},
  {"id":"108","name":"You are awesome!"}
];

Si vous utilisez jQuery, utilisez jQuery.grep comme ceci:

items = $.grep(items, function(item) { 
  return item.id !== '88';
});
// items => [{ id: "99" }, { id: "108" }]

Utilisation de ES5 Array.prototype.filter :

items = items.filter(function(item) { 
  return item.id !== '88'; 
});
// items => [{ id: "99" }, { id: "108" }]
3
nekman
Array.prototype.removeAt = function(id) {
    for (var item in this) {
        if (this[item].id == id) {
            this.splice(item, 1);
            return true;
        }
    }
    return false;
}

Cela devrait faire l'affaire, jsfiddle

2
casraf

Assurez-vous de contraindre l'ID d'objet en entier si vous testez une égalité stricte:

var result = $.grep(data, function(e, i) { 
  return +e.id !== id;
});

Démo

0
Andy

Si vous utilisez un trait de soulignement js, il est facile de supprimer un objet basé sur la clé . http://underscorejs.org .

  var temp1=[{id:1,name:"safeer"},  //temp array
             {id:2,name:"jon"},
             {id:3,name:"James"},
             {id:4,name:"deepak"},
             {id:5,name:"ajmal"}];

  var id = _.pluck(temp1,'id'); //get id array from temp1
  var ids=[2,5,10];             //ids to be removed
  var bool_ids=[];
  _.each(ids,function(val){
     bool_ids[val]=true;
  });
  _.filter(temp1,function(val){
     return !bool_ids[val.id];
  });
0
Mohammed Safeer