Eliminate items from one array when there is a corresponding match in a separate array using JavaScript

Question

Eliminate items from one array when there is a corresponding match in a separate array using JavaScript

I am working with 2 JavaScript arrays

First Array

var columns=[{name: 'id', default: true}, {name: 'type', default: true},{name: 'typeName', default: true}, {name: 'client', default: false}];

Second Array

var unSelect=["id", "type", "typeName"]

Now I need to create a new array, Third Array, which contains only elements that do not match the name property in both previous arrays.

In this scenario:

var thirdArray=[{name: 'client', default: false}]

I attempted to use splice method but encountered issues with index matching.

javascript arrays

Answer 1

Answer №1

One effective way to accomplish this task is by utilizing the Array.prototype.map function. By using this function, you can loop through an array and specify what should be returned during each iteration.

var updatedItems = originalArray.map(function(item) {

   if (filteredItems.indexOf(item.name) < 0)   // Check if item's name is not in the filtered items
     return item;                           // If true, return the current element 
})

Answer 2

One effective way to accomplish this task is by utilizing the Array.prototype.map function. By using this function, you can loop through an array and specify what should be returned during each iteration.

var updatedItems = originalArray.map(function(item) {

   if (filteredItems.indexOf(item.name) < 0)   // Check if item's name is not in the filtered items
     return item;                           // If true, return the current element 
})

Answer 3

Answer №2

Consider utilizing the filter method like this:

var unSelect=["id", "type", "typeName"];
var array3 = columns.filter(function(obj){
  return unSelect.indexOf( obj.name ) == -1;
});

DEMO

var columns = [{
  name: 'id',
  default: true
}, {
  name: 'type',
  default: true
}, {
  name: 'typeName',
  default: true
}, {
  name: 'client',
  default: false
}];
var unSelect = ["id", "type", "typeName"];
var array3 = columns.filter(function(obj) {
  return unSelect.indexOf(obj.name) == -1;
});
console.log(array3);

Answer 4

Consider utilizing the filter method like this:

var unSelect=["id", "type", "typeName"];
var array3 = columns.filter(function(obj){
  return unSelect.indexOf( obj.name ) == -1;
});

DEMO

var columns = [{
  name: 'id',
  default: true
}, {
  name: 'type',
  default: true
}, {
  name: 'typeName',
  default: true
}, {
  name: 'client',
  default: false
}];
var unSelect = ["id", "type", "typeName"];
var array3 = columns.filter(function(obj) {
  return unSelect.indexOf(obj.name) == -1;
});
console.log(array3);

Answer 5

Answer №3

One way to improve the speed of accessing unwanted items is by using a hash table instead of the indexOf method.

var elements = [{ tag: 'div', active: true }, { tag: 'p', active: true }, { tag: 'a', active: false }, { tag: 'span', active: false }],
    exclude = ["a", "span"],
    hashtable = Object.create(null),
    output;

exclude.forEach(function (item) {
    hashtable[item] = true;
});

output = elements.filter(function (item) {
    return !hashtable[item.tag];
});

console.log(output);

Answer 6

One way to improve the speed of accessing unwanted items is by using a hash table instead of the indexOf method.

var elements = [{ tag: 'div', active: true }, { tag: 'p', active: true }, { tag: 'a', active: false }, { tag: 'span', active: false }],
    exclude = ["a", "span"],
    hashtable = Object.create(null),
    output;

exclude.forEach(function (item) {
    hashtable[item] = true;
});

output = elements.filter(function (item) {
    return !hashtable[item.tag];
});

console.log(output);

Answer 7

Answer №4

My approach to this problem involves utilizing the combination of Array.prototype.filter() and Array.prototype.some().

const columns = [{name: 'id', default: true}, {name: 'type', default: true},{name: 'typeName', default: true}, {name: 'client', default: false}],
   unSelect = ["id", "type", "typeName"],
   filteredColumns = columns.filter(col => !unSelect.some(val => val === col.name));
console.log(filteredColumns);

Answer 8

My approach to this problem involves utilizing the combination of Array.prototype.filter() and Array.prototype.some().

const columns = [{name: 'id', default: true}, {name: 'type', default: true},{name: 'typeName', default: true}, {name: 'client', default: false}],
   unSelect = ["id", "type", "typeName"],
   filteredColumns = columns.filter(col => !unSelect.some(val => val === col.name));
console.log(filteredColumns);

Eliminate items from one array when there is a corresponding match in a separate array using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a more efficient method to execute this AJAX request?

What is the best way to implement rate limiting for asynchronous API calls within a specific timeframe?

The image is loaded correctly through the image picker, however, it is not displaying on the screen

Issue with Dropzone not functioning correctly within Vue transition modal

Are your file uploaders malfunctioning by saving empty image files?

Issue: The error message "articales.forEach is not a function" is indicating

Javascript issue: opening mail client causes page to lose focus

What's the best way to showcase array values in JavaScript?

The error message "Required parameter not provided" appeared when trying to utilize a nested dynamic route in Next.js

Is it possible to change the text of a scrollspy dropdown to a default text when it is not actively tracking any items?

"Using the power of jQuery to efficiently bind events to elements through associative

Having difficulty executing the Cypress open command within a Next.js project that uses Typescript

How to add a jQuery function to a Rails 3 if statement?

Is it a usual technique to retrieve dynamic content using PhoneGap?

What are the steps to resolve a Fetch request issue with a Node.js server?

What can you do with jQuery and an array or JSON data

Transforming a numpy array of dimensions (M, N, O) into a point cloud

Using AngularJS to compare values against user input to determine if they are greater or lesser

Ways to emphasize search outcomes in Flask/HTML?

Refresh Form (Reactive Forms)