jQuery Remove Multiple Objects from Array Based On Another Array

Question

I have an array, which contains a list of names. If those names match a key/value pair in another array, I'd like to remove the object containing the match and return the array without that object.

Here's what I have so far as an example:

var supervisorsToRemove = ["Supervisor1", "Supervisor2"];
var data = [{id: "Name1", supervisor: "Supervisor1"},{id: "Name2", supervisor: "Supervisor1"},{id: "Name3", supervisor: "Supervisor2"},{id: "Name4", supervisor: "Supervisor3"}]

I'd like the resulting data array to be:

data = [{id: "Name4", supervisor: "Supervisor3"}]

I can remove one supervisor's objects with the following:

var supervisorsToRemove = "Supervisor1";
data = $.grep(data, function(e){ 
     return e.supervisor != supervisorsToRemove; 
});

But when I try to remove all in the array, it doesn't work:

var supervisorsToRemove = ["Supervisor1","Supervisor2"];
data = $.grep(data, function(e){ 
     return e.supervisor != supervisorsToRemove; 
});

Pranav C Balan · Accepted Answer · 2017-02-01 19:24:41Z

Use Array#indexOf method(or Array#includes method) to check element present in an array

data = $.grep(data, function(e){ 
  return supervisorsToRemove.indexOf(e.supervisor) == -1; 
  // or return supervisorsToRemove.includes(e.supervisor); 
});

var supervisorsToRemove = ["Supervisor1", "Supervisor2"];
var data = [{
  id: "Name1",
  supervisor: "Supervisor1"
}, {
  id: "Name2",
  supervisor: "Supervisor1"
}, {
  id: "Name3",
  supervisor: "Supervisor2"
}, {
  id: "Name4",
  supervisor: "Supervisor3"
}]
console.log($.grep(data, function(e) {
  return supervisorsToRemove.indexOf(e.supervisor) == -1;
  // or return supervisorsToRemove.includes(e.supervisor); 
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

A better approach would be using an object which holds the supervisor value as property, that would help to make it faster since Array#indexOf method is slower one.

var supervisorsToRemove = {"Supervisor1" : true, "Supervisor2" : true };

data = $.grep(data, function(e){ 
  return !supervisorsToRemove[e.supervisor]; 
});

var data = [{
  id: "Name1",
  supervisor: "Supervisor1"
}, {
  id: "Name2",
  supervisor: "Supervisor1"
}, {
  id: "Name3",
  supervisor: "Supervisor2"
}, {
  id: "Name4",
  supervisor: "Supervisor3"
}]
var supervisorsToRemove = {
  "Supervisor1": true,
  "Supervisor2": true
};

console.log(
  $.grep(data, function(e) {
    return !supervisorsToRemove[e.supervisor];
  })
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In case you don't have control over the array then generate the object using Array#reduce method.

var obj = supervisorsToRemove.reduce(function(obj, v){ obj[v] = true; return obj; }, {});

data = $.grep(data, function(e){ 
  return !obj[e.supervisor]; 
});

var supervisorsToRemove = ["Supervisor1", "Supervisor2"];
var data = [{
  id: "Name1",
  supervisor: "Supervisor1"
}, {
  id: "Name2",
  supervisor: "Supervisor1"
}, {
  id: "Name3",
  supervisor: "Supervisor2"
}, {
  id: "Name4",
  supervisor: "Supervisor3"
}]
var supervisorsToRemove = {
  "Supervisor1": true,
  "Supervisor2": true
};


var obj = supervisorsToRemove.reduce(function(obj, v) {
  obj[v] = true;
  return obj;
}, {});

console.log(
  $.grep(data, function(e) {
    return !obj[e.supervisor];
  })
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can even use native Javascript Array#filter method.

var supervisorsToRemove = ["Supervisor1", "Supervisor2"];
var data = [{
  id: "Name1",
  supervisor: "Supervisor1"
}, {
  id: "Name2",
  supervisor: "Supervisor1"
}, {
  id: "Name3",
  supervisor: "Supervisor2"
}, {
  id: "Name4",
  supervisor: "Supervisor3"
}]
var supervisorsToRemove = {
  "Supervisor1": true,
  "Supervisor2": true
};

console.log(
  data.filter(function(e) {
    return !supervisorsToRemove[e.supervisor];
  })
);

Thank you, your first example worked perfectly. Thanks for the suggestion on improvement, I'm still learning and that helps. I create the "supervisorsToRemove" by comparing two arrays like so: var allNames = ["Supervisor1","Supervisor2","Name1","Name2","Name3","Name4"]; var allSupervisors = ["Supervisor1","Supervisor2", "Supervisor3"]; var supervisorsToRemove = allSupervisors.filter(i => allNames.indexOf(i) == -1); How would I go about changing the result to an object as you suggest to speed it up?

Paul Roub · Accepted Answer · 2017-02-01 19:06:46Z

0

In any reasonably-modern browser, no jQuery is needed. filter() will do the job.

var supervisorsToRemove = ["Supervisor1", "Supervisor2"];
var data = [{
  id: "Name1",
  supervisor: "Supervisor1"
}, {
  id: "Name2",
  supervisor: "Supervisor1"
}, {
  id: "Name3",
  supervisor: "Supervisor2"
}, {
  id: "Name4",
  supervisor: "Supervisor3"
}]


var results = data.filter(function(o) {
  return (supervisorsToRemove.indexOf(o.supervisor) < 0);
});

console.log(results);

answered Feb 1, 2017 at 19:06

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Collectives™ on Stack Overflow

jQuery Remove Multiple Objects from Array Based On Another Array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related