How can I remove an object from an array?
I wish to remove the object that includes name Kristian
from someArray
. For example:
JavaScript
x
3
1
someArray = [{name:"Kristian", lines:"2,5,10"},
2
{name:"John", lines:"1,19,26,96"}];
3
I want to achieve:
JavaScript
1
2
1
someArray = [{name:"John", lines:"1,19,26,96"}];
2
Advertisement
Answer
You can use several methods to remove item(s) from an Array:
JavaScript
1
13
13
1
//1
2
someArray.shift(); // first element removed
3
//2
4
someArray = someArray.slice(1); // first element removed
5
//3
6
someArray.splice(0, 1); // first element removed
7
//4
8
someArray.pop(); // last element removed
9
//5
10
someArray = someArray.slice(0, someArray.length - 1); // last element removed
11
//6
12
someArray.length = someArray.length - 1; // last element removed
13
If you want to remove element at position x
, use:
JavaScript
1
2
1
someArray.splice(x, 1);
2
Or
JavaScript
1
2
1
someArray = someArray.slice(0, x).concat(someArray.slice(-x));
2
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:
JavaScript
1
50
50
1
// non destructive filter > noJohn = John removed, but someArray will not change
2
let someArray = getArray();
3
let noJohn = someArray.filter( el => el.name !== "John" );
4
log(`let noJohn = someArray.filter( el => el.name !== "John")`,
5
`non destructive filter [noJohn] =`, format(noJohn));
6
log(`**someArray.length ${someArray.length}`);
7
8
// destructive filter/reassign John removed > someArray2 =
9
let someArray2 = getArray();
10
someArray2 = someArray2.filter( el => el.name !== "John" );
11
log("",
12
`someArray2 = someArray2.filter( el => el.name !== "John" )`,
13
`destructive filter/reassign John removed [someArray2] =`,
14
format(someArray2));
15
log(`**someArray2.length after filter ${someArray2.length}`);
16
17
// destructive splice /w findIndex Brian remains > someArray3 =
18
let someArray3 = getArray();
19
someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1);
20
someArray3.splice(someArray3.findIndex(v => v.name === "John"), 1);
21
log("",
22
`someArray3.splice(someArray3.findIndex(v => v.name === "Kristian"), 1),`,
23
`destructive splice /w findIndex Brian remains [someArray3] =`,
24
format(someArray3));
25
log(`**someArray3.length after splice ${someArray3.length}`);
26
27
// if you're not sure about the contents of your array,
28
// you should check the results of findIndex first
29
let someArray4 = getArray();
30
const indx = someArray4.findIndex(v => v.name === "Michael");
31
someArray4.splice(indx, indx >= 0 ? 1 : 0);
32
log("", `someArray4.splice(indx, indx >= 0 ? 1 : 0)`,
33
`check findIndex result first [someArray4] = (nothing is removed)`,
34
format(someArray4));
35
log(`**someArray4.length (should still be 3) ${someArray4.length}`);
36
37
// -- helpers --
38
function format(obj) {
39
return JSON.stringify(obj, null, " ");
40
}
41
42
function log(txt) {
43
document.querySelector("pre").textContent += `${txt.join("n")}n`
44
}
45
46
function getArray() {
47
return [ {name: "Kristian", lines: "2,5,10"},
48
{name: "John", lines: "1,19,26,96"},
49
{name: "Brian", lines: "3,9,62,36"} ];
50
}
JavaScript
1
4
1
<pre>
2
**Results**
3
4
</pre>