Supprimer un objet d'un tableau à l'aide de JavaScript
Comment puis-je supprimer un objet d'un tableau? Je souhaite supprimer l'objet contenant le nom Kristian de someArray. Par exemple:
someArray = [{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"}];
Je veux réaliser:
someArray = [{name:"John", lines:"1,19,26,96"}];
Vous pouvez utiliser plusieurs méthodes pour supprimer des éléments d'un tableau:
//1
someArray.shift(); // first element removed
//2
someArray = someArray.slice(1); // first element removed
//3
someArray.splice(0, 1); // first element removed
//4
someArray.pop(); // last element removed
//5
someArray = someArray.slice(0, a.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removed
Si vous souhaitez supprimer un élément à la position x, utilisez:
someArray.splice(x, 1);
Ou
someArray = someArray.slice(0, x).concat(someArray.slice(-x));
Répondre au commentaire de @ chill182 : vous pouvez supprimer un ou plusieurs éléments d'un tableau à l'aide de Array.filter ou de Array.splice combiné à Array.findIndex (voir MDN ), par exemple.
// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" );
log("non destructive filter > noJohn = ", format(noJohn));
log(`**someArray.length ${someArray.length}`);
// destructive filter/reassign John removed > someArray2 =
let someArray2 = getArray();
someArray2 = someArray2.filter( el => el.name !== "John" );
log("", "destructive filter/reassign John removed > someArray2 =",
format(someArray2));
log(`**someArray2.length ${someArray2.length}`);
// destructive splice /w findIndex Brian remains > someArray3 =
let someArray3 = getArray();
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
log("", "destructive splice /w findIndex Brian remains > someArray3 =",
format(someArray3));
log(`**someArray3.length ${someArray3.length}`);
function format(obj) {
return JSON.stringify(obj, null, " ");
}
function log(...txt) {
document.querySelector("pre").textContent += `${txt.join("\n")}\n`
}
function getArray() {
return [ {name: "Kristian", lines: "2,5,10"},
{name: "John", lines: "1,19,26,96"},
{name: "Brian", lines: "3,9,62,36"} ];
}<pre>
**Results**
</pre>Je recommande d'utiliser nderscore.js ou sugar.js pour les tâches courantes comme celle-ci:
// underscore.js
someArray = _.reject(someArray, function(el) { return el.Name === "Kristian"; });
// sugar.js
someArray.remove(function(el) { return el.Name === "Kristian"; });
dans la plupart des projets, il est très utile d’avoir un ensemble de méthodes d’aide fournies par des bibliothèques comme celles-ci.
La solution propre consisterait à utiliser Array.filter :
_var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
_Le problème avec ceci est que ne fonctionne pas sur IE <9. Toutefois, vous pouvez inclure du code provenant d'une bibliothèque Javascript (par exemple, nderscore.js ) qui implémente cela pour n’importe quel navigateur.
Que dis-tu de ça?
$.each(someArray, function(i){
if(someArray[i].name === 'Kristian') {
someArray.splice(i,1);
return false;
}
});
Votre "tableau", comme indiqué, est une syntaxe JavaScript non valide. Les crochets {} sont destinés aux objets avec des paires nom de propriété/valeur, mais les crochets [] correspondent à des tableaux - comme ceci:
someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
Dans ce cas, vous pouvez utiliser la méthode .splice() pour supprimer un élément. Pour supprimer le premier élément (index 0), dites:
someArray.splice(0,1);
// someArray = [{name:"John", lines:"1,19,26,96"}];
Si vous ne connaissez pas l'index mais souhaitez effectuer une recherche dans le tableau pour trouver l'élément portant le nom "Kristian", vous pouvez le supprimer:
for (var i =0; i < someArray.length; i++)
if (someArray[i].name === "Kristian") {
someArray.splice(i,1);
break;
}
EDIT: Je viens de remarquer que votre question est marquée avec "jQuery", vous pouvez donc essayer la méthode $.grep() :
someArray = $.grep(someArray,
function(o,i) { return o.name === "Kristian"; },
true);
ES2015
let someArray = [
{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"},
{name:"Kristian", lines:"2,58,160"},
{name:"Felix", lines:"1,19,26,96"}
];
someArray = someArray.filter(person => person.name != 'John');
Il va supprimer John!
Vous pouvez utiliser array.filter ().
par exemple.
someArray = [{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"}];
someArray = someArray.filter(function(returnableObjects){
return returnableObjects.name !== 'Kristian';
});
//someArray will now be = [{name:"John", lines:"1,19,26,96"}];
Fonctions de flèche:
someArray = someArray.filter(x => x.name !== 'Kristian')
J'ai créé une fonction dynamique qui prend les objets Array, Key et value et renvoie le même tableau après avoir supprimé l'objet souhaité:
function removeFunction (myObjects,prop,valu)
{
return myObjects.filter(function (val) {
return val[prop] !== valu;
});
}
Exemple complet: DÉMO
var obj = {
"results": [
{
"id": "460",
"name": "Widget 1",
"loc": "Shed"
}, {
"id": "461",
"name": "Widget 2",
"loc": "Kitchen"
}, {
"id": "462",
"name": "Widget 3",
"loc": "bath"
}
]
};
function removeFunction (myObjects,prop,valu)
{
return myObjects.filter(function (val) {
return val[prop] !== valu;
});
}
console.log(removeFunction(obj.results,"id","460"));
C'est une fonction qui fonctionne pour moi:
function removeFromArray(array, value) {
var idx = array.indexOf(value);
if (idx !== -1) {
array.splice(idx, 1);
}
return array;
}
someArray = jQuery.grep(someArray , function (value) {
return value.name != 'Kristian';
});
Vous pouvez aussi essayer de faire quelque chose comme ça:
var myArray = [{'name': 'test'}, {'name':'test2'}];
var myObject = {'name': 'test'};
myArray.splice(myArray.indexOf(myObject),1);
Votez pour le ndercoreJS pour un travail simple avec des tableaux.
_. without () La fonction permet de supprimer un élément:
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
=> [2, 3, 4]
Utilisez la fonction d'épissure sur les tableaux. Spécifiez la position de l'élément de départ et la longueur de la sous-séquence à supprimer.
someArray.splice(pos, 1);
Avec fonction ES 6 flèche
let someArray = [
{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"}
];
let arrayToRemove={name:"Kristian", lines:"2,5,10"};
someArray=someArray.filter((e)=>e.name !=arrayToRemove.name && e.lines!= arrayToRemove.lines)
Bien que cela ne soit probablement pas approprié à cette situation, j’ai appris l’autre jour que vous pouvez également utiliser le mot clé delete pour supprimer un élément d’un tableau si vous n’avez pas besoin de modifier sa taille, par exemple.
var myArray = [1,2,3];
delete myArray[1];
console.log(myArray[1]); //undefined
console.log(myArray.length); //3 - doesn't actually shrink the array down
Cette réponse
for (var i =0; i < someArray.length; i++)
if (someArray[i].name === "Kristian") {
someArray.splice(i,1);
}
ne fonctionne pas pour plusieurs enregistrements remplissant la condition. Si vous avez deux enregistrements consécutifs, seul le premier est supprimé et l’autre ignoré. Vous devez utiliser:
for (var i = someArray.length - 1; i>= 0; i--)
...
au lieu .
Il semble y avoir une erreur dans la syntaxe de votre tableau, donc si vous parlez de tableau plutôt que d’objet, Array.splice est votre ami ici:
someArray = [{name:"Kristian", lines:"2,5,10"}, {name:"John", lines:"1,19,26,96"}];
someArray.splice(1,1)
C'est ce que j'utilise.
Array.prototype.delete = function(pos){
this[pos] = undefined;
var len = this.length - 1;
for(var a = pos;a < this.length - 1;a++){
this[a] = this[a+1];
}
this.pop();
}
Alors c'est aussi simple que de dire
var myArray = [1,2,3,4,5,6,7,8,9];
myArray.delete(3);
Remplacez n'importe quel nombre au lieu de trois. Après la sortie attendue devrait être:
console.log(myArray); //Expected output 1,2,3,5,6,7,8,9
Si vous souhaitez supprimer toutes les occurrences d'un objet donné (en fonction de certaines conditions), utilisez la méthode de raccordement javascript à l'intérieur d'une boucle for the loop.
Étant donné que la suppression d'un objet affecterait la longueur du tableau, veillez à décrémenter le compteur d'un pas, de sorte que le contrôle de la longueur reste intact.
var objArr=[{Name:"Alex", Age:62},
{Name:"Robert", Age:18},
{Name:"Prince", Age:28},
{Name:"Cesar", Age:38},
{Name:"Sam", Age:42},
{Name:"David", Age:52}
];
for(var i = 0;i < objArr.length; i ++)
{
if(objArr[i].Age > 20)
{
objArr.splice(i, 1);
i--; //re-adjust the counter.
}
}
L'extrait de code ci-dessus supprime tous les objets dont l'âge est supérieur à 20 ans.
Vous pouvez également utiliser la fonction map.
someArray = [{name:"Kristian", lines:"2,5,10"},{name:"John",lines:"1,19,26,96"}];
newArray=[];
someArray.map(function(obj, index){
if(obj.name !== "Kristian"){
newArray.Push(obj);
}
});
someArray = newArray;
console.log(someArray);
La solution la plus simple serait de créer une carte qui stocke les index pour chaque objet par nom, comme ceci:
//adding to array
var newPerson = {name:"Kristian", lines:"2,5,10"}
someMap[ newPerson.name ] = someArray.length;
someArray.Push( newPerson );
//deleting from the array
var index = someMap[ 'Kristian' ];
someArray.splice( index, 1 );
splice (i, 1) où i est l’index incrémental du tableau supprime l’objet. Mais rappelez-vous que splice réinitialisera également la longueur du tableau, alors faites attention à 'non défini'. En utilisant votre exemple, si vous supprimez 'Kristian', lors de la prochaine exécution dans la boucle, je serai 2 mais someArray aura une longueur de 1, donc si vous essayez de supprimer "John", vous obtiendrez une erreur "indéfinie" . Une solution à ce problème, bien que peu élégant, consiste à disposer de compteurs séparés pour suivre l’index de l’élément à supprimer.
Utilisez la fonction splice () de javascript.
Cela peut aider: http://www.w3schools.com/jsref/jsref_splice.asp
Ce concept utilisant la grille de Kendo
var grid = $("#addNewAllergies").data("kendoGrid");
var selectedItem = SelectedCheckBoxList;
for (var i = 0; i < selectedItem.length; i++) {
if(selectedItem[i].boolKendoValue==true)
{
selectedItem.length= 0;
}
}
Vous pouvez également utiliser some :
someArray = [{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"}];
someArray.some(item => {
if(item.name === "Kristian") // Case sensitive, will only remove first instance
someArray.splice(someArray.indexOf(item),1)
})