removing an object from array of objects using object property

Question

I have an array of objects in my javascript application, looks something like

var data = [
 {
  id:2467,
  name:'alex',
  grade:'B',
 },
 {
  id:5236,
  name:'bob',
  grade:'A-',
 },
 {
  id:1784,
  name:'carl',
  grade:'C',
 },
 {
  id:5841,
  name:'dave',
  grade:'AA',
 },
 {
  id:3278,
  name:'harry',
  grade:'B+',
 },
]

Now I have to remove or pop an object from this array on the basis of object id, using a function something like

function removeStudent(id){
  //logic for removing object based on object id
}

It should be like

removeStudent(5236);

then the data array afterwards should be like

var data = [
 {
  id:2467,
  name:'alex',
  grade:'B',
 },
 {
  id:1784,
  name:'carl',
  grade:'C',
 },
 {
  id:5841,
  name:'dave',
  grade:'AA',
 },
 {
  id:3278,
  name:'harry',
  grade:'B+',
 },
]

I tried using pop() but I think that will remove the last element from the array, not the specific one. I have looked at this post of removing an element from array

How do I remove a particular element from an array in JavaScript?

but I didn't find my answer here respected to objects Needed help!

I'm amazed by the 10k+ users who are answering an obvious duplicate :) — Adelin, Jul 19 '18 at 07:12
Or if you whish, you can use a wonderful library like `lodash`, and use Arrays methods (dropXXX, pullXXX) : https://lodash.com/docs/4.17.10#pullAllBy — Etienne, Jul 19 '18 at 07:14
@Adelin yes I really agree with you they could just comment and then mark it as dup. — vibhor1997a, Jul 19 '18 at 07:17
@OP: *I didn't find my answer here respected to objects*. And in case you'll need to filter by `name` you'll post another question as well? — Adelin, Jul 19 '18 at 07:19
@Adelin First of all I am fresher, recently started my developer's journey.I have been working till now in backend technologies like Servlets, Spring boot etc. Now my company wants me to work as full stack. So new in javascript. — Yash Jain, Jul 19 '18 at 07:20
@YashJain that doesn't justify lack of efforts and searching yourself. — Adelin, Jul 19 '18 at 07:21
@Adelin you are right but I tried to find out the answer in the post you used to mark my question as duplicate. Javascript objects are bit different than normal java object. Its easy for me to work with java objects, I am new with javascript and still I have to work over angular, jquery, typescript etc. — Yash Jain, Jul 19 '18 at 07:24
@Adelin anyway, thanks for letting me know that I didn't take efforts to figure out my answer. Next time, it wont be repeated — Yash Jain, Jul 19 '18 at 07:27

hsz · Accepted Answer · 2018-07-19T07:12:31.857

7

You can try with Array.prototype.filter():

function removeStudent(data, id) {
  return data.filter(student => student.id !== id);
}

It will create a copy of the input data array.

const newData = removeStudent(data, 5236);

edited Jul 19 '18 at 07:12

answered Jul 19 '18 at 07:10

hsz

136,835
55
236
297

3

Just a note, this will not remove the entry from the original `data`. OP would have to use `data = removeStudent(data, id)` – Phil Jul 19 '18 at 07:11
@Phil Yup, worth to mention - added in my answer. – hsz Jul 19 '18 at 07:12
Or just use `splice` method in combination with `findIndex` like in my answer. – Mihai Alexandru-Ionut Jul 19 '18 at 07:13
`Array.filter` iterates till the end of the array even though the match is found at the first index. It effects performance. What do you think? – Nikhil Aggarwal Jul 19 '18 at 07:14
1

@NikhilAggarwal doesn't `array.splice` also have a complexity of `O(n)`? So would that really matter if the `filter` looks more elegant. – vibhor1997a Jul 19 '18 at 07:15
1

@vibhor1997a - Makes sense. I overlooked that part. – Nikhil Aggarwal Jul 19 '18 at 07:18

score 1 · Answer 2 · answered Jul 19 '18 at 07:11

Use Array.findIndex and Array.splice

var data = [ { id:2467, name:'alex', grade:'B', }, { id:5236, name:'bob', grade:'A-', }, { id:1784, name:'carl', grade:'C', }, { id:5841, name:'dave', grade:'AA', }, { id:3278, name:'harry', grade:'B+', }];

function removeStudent(_id){
  var index = data.findIndex(({id}) => id === _id);
  if(index !== -1) data.splice(index,1);
}
removeStudent(5236);
console.log(data);

score 1 · Answer 3 · answered Jul 19 '18 at 07:12

Use array filter method. It will return a new array of matched elements.In your case you need to return all the objects where id is not the the one which is passed in argument

var data = [{
    id: 2467,
    name: 'alex',
    grade: 'B',
  },
  {
    id: 5236,
    name: 'bob',
    grade: 'A-',
  },
  {
    id: 1784,
    name: 'carl',
    grade: 'C',
  },
  {
    id: 5841,
    name: 'dave',
    grade: 'AA',
  },
  {
    id: 3278,
    name: 'harry',
    grade: 'B+',
  },
]

function removeStudent(id) {
  return data.filter(function(item) {
    return item.id !== id;
  })
}
console.log(removeStudent(5236));

score 0 · Answer 4 · answered Jul 19 '18 at 07:11

You have to use findIndex instead, by passing a callback function as argument

var data = [ { id:2467, name:'alex', grade:'B', }, { id:5236, name:'bob', grade:'A-', }, { id:1784, name:'carl', grade:'C', }, { id:5841, name:'dave', grade:'AA', }, { id:3278, name:'harry', grade:'B+', }, ]
let id = 5236;
data.splice(data.findIndex(p => p.id == id), 1);
console.log(data);

score 0 · Answer 5 · answered Jul 19 '18 at 07:14

You can use filter() but make sure you reassign the filter result to data to overwrite the original value:

var data = [
 {
  id:2467,
  name:'alex',
  grade:'B',
 },
 {
  id:5236,
  name:'bob',
  grade:'A-',
 },
 {
  id:1784,
  name:'carl',
  grade:'C',
 },
 {
  id:5841,
  name:'dave',
  grade:'AA',
 },
 {
  id:3278,
  name:'harry',
  grade:'B+',
 },
];

function removeStudent(data, id){
  return data.filter(student => student.id !== id);
}

data = removeStudent(data, 5236);
console.log(data);

removing an object from array of objects using object property

5 Answers5