patternjavascriptCritical
Remove Object from Array using JavaScript
Viewed 0 times
arrayobjectfromremoveusingjavascript
Problem
How can I remove an object from an array?
I wish to remove the object that includes name
I want to achieve:
I wish to remove the object that includes name
Kristian from someArray. For example:someArray = [{name:"Kristian", lines:"2,5,10"},
{name:"John", lines:"1,19,26,96"}];I want to achieve:
someArray = [{name:"John", lines:"1,19,26,96"}];Solution
You can use several methods to remove item(s) from an Array:
If you want to remove element at position
Or
Reply to the comment of @chill182: you can remove one or more elements from an array using
See this Stackblitz project or the snippet below:
//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, someArray.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removedIf you want to remove element at position
x, use:someArray.splice(x, 1);Or
someArray = someArray.slice(0, x).concat(someArray.slice(-x));Reply to the comment of @chill182: you can remove one or more elements from an array using
Array.filter, or Array.splice combined with Array.findIndex (see MDN).See this Stackblitz project or the snippet below:
// non destructive filter > noJohn = John removed, but someArray will not change
let someArray = getArray();
let noJohn = someArray.filter( el => el.name !== "John" );
log(let noJohn = someArray.filter( el => el.name !== "John"),
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("",
someArray2 = someArray2.filter( el => el.name !== "John" ),
destructive filter/reassign John removed [someArray2] =,
format(someArray2));
log(**someArray2.length after filter ${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("",
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1),,
destructive splice /w findIndex Brian remains [someArray3] =,
format(someArray3));
log(**someArray3.length after splice ${someArray3.length});
// if you're not sure about the contents of your array,
// you should check the results of findIndex first
let someArray4 = getArray();
const indx = someArray4.findIndex(v => v.name === "Michael");
someArray4.splice(indx, indx >= 0 ? 1 : 0);
log("", someArray4.splice(indx, indx >= 0 ? 1 : 0),
check findIndex result first [someArray4] = (nothing is removed),
format(someArray4));
log(**someArray4.length (should still be 3) ${someArray4.length});
// -- helpers --
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"} ];
}
Results
Code Snippets
//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, someArray.length - 1); // last element removed
//6
someArray.length = someArray.length - 1; // last element removedsomeArray.splice(x, 1);someArray = someArray.slice(0, x).concat(someArray.slice(-x));Context
Stack Overflow Q#10024866, score: 1043
Revisions (0)
No revisions yet.