jquery - Hitta och ta bort objekt i en array baserat på ett nyckelvärde i JavaScript


Jag har försökt flera tillvägagångssätt för hur man hittar ett objekt i en array, där ID=var, och om det hittas, ta bort objektet från arrayen och returnera den nya arrayen med objekt.

Data:

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

Jag kan söka i arrayen med jQuery $grep

var id = 88;

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

Men hur kan jag radera hela objektet när id == 88, och returnera data som följande?

Data:

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

Svar #1

Här är en lösning om du inte använder jQuery:

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

Svar #2

Jag kan söka igenom arrayen efter id, men hur kan jag ta bort hela objektet där id == 88

Filtrera helt enkelt efter det motsatta predikatet:

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

Svar #3

Du kan förenkla detta, och det finns egentligen inget behov av att använda jQuery här.

var id = 88;

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

Iterera bara genom listan, hitta det matchande id:t, splica, och bryt sedan för att avsluta din loop.

Svar #4

Det finns en ny metod för att göra detta i ES6/2015 med findIndex och array spread-operatorn:

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

Du kan göra om det till en funktion för att använda senare på detta sätt:

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;
}

På det här sättet kan du ta bort objekt med olika nycklar med en metod (och om det inte finns något objekt som uppfyller kriterierna får du tillbaka den ursprungliga arrayen):

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

Eller så kan du sätta det på din 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;
};

Och använd det på detta sätt:

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

Svar #5

Inhemsk ES6-lösning:

const pos = data.findIndex(el => el.id === ID_TO_REMOVE);
if (pos >= 0)
    data.splice(pos, 1);

Om du vet att elementet finns i arrayen säkert:

data.splice(data.findIndex(el => el.id === ID_TO_REMOVE), 1);

Prototyp:

Array.prototype.removeByProp = function(prop,val) {
    const pos = this.findIndex(x => x[prop] === val);
    if (pos >= 0)
        return this.splice(pos, 1);
};

// usage:
ar.removeByProp('id', ID_TO_REMOVE);

http://jsfiddle.net/oriadam/72kgprw5/

Observera: detta tar bort objektet på plats. Om du behöver en ny array, använd filter som nämnts i tidigare svar.

Svar #6

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

Om du använder jQuery, använd jQuery.grep på detta sätt:

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

Använder ES5 Array.prototype.filter:

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

Relaterade artiklar