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

The Express GET route does not support parameters or additional paths

Navigating the complexities of extracting and storing a data type from a collection of objects

Delay the fading in of an element using jQuery

Changing the variable within a promise in Angular 1

I am looking to create a counter in NextJS that will store its value in a database for persistent storage. How can

Leveraging jQuery in Content Scripts for Chrome Extensions

The content in tinymce cannot be edited or removed

Exploring File Reading and 2-Dimensional Array with Array Bound Caution

Contrast and combine information from two JavaScript arrays of objects

The interface vanishes upon the integration of TinyMCE into the module

Positioning oversized images in a React Native application

Activating and deactivating event capturing in Vue.js

Altering Image Order Across Various Slides

Incorporate 'Additional features' into the Navbar when adjusting window size

Steps for raising a unique error in an asynchronous callout

endless cycle of scrolling for div tags

Ending a timed function in AngularJS 1

Is there a way to efficiently navigate a local JSON file using React JS?

Learn how to design a customized loading screen using CSS with Phonegap

Guide on setting up ShareThis on a Vue.js project