Filter an array of objects based on criteria from another array

Question

Filter an array of objects based on criteria from another array

CustomArray.prototype.erase = function() {
  var target, args = arguments,
    length = args.length,
    index;
  while (length && this.length) {
    target = args[--length];
    while ((index = this.indexOf(target)) !== -1) {
      this.splice(index, 1);
    }
  }
  return this;
};

var data = [{
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}]

var targetsToRemove = [{
  title: 'Bookable',
  start: moment("2018-04-06 06:00"),
  end: moment("2018-04-06 07:00"),
  allDay: false
}];
console.log("Before: " + data.length)
for (var i = 0; i < targetsToRemove.length; i++) {
  data.erase(moment(targetsToRemove[i].start).format("YYYY-MM-DD HH:mm"));
}
console.log("After: " + data.length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.js"></script>

I aim to eliminate certain elements from one array by using another as a guide. Both arrays consist solely of objects similar to the one below. All corresponding objects in targetsToRemove should be deleted from the data array. The start property seems suitable for this purpose, but there is no Id.

The object structure is:

   var item = {
                            title: 'Bookable',
                            start: moment(datesValue + " " + hourValue.start),
                            end: moment(datesValue + " " + hourValue.end),
                            allDay: false
                        };

Prototype.remove

       CustomArray.prototype.erase = function () {
        var target, args = arguments,
            length = args.length,
            index;
        while (length && this.length) {
            target = args[--length];
            while ((index = this.indexOf(target)) !== -1) {
                this.splice(index, 1);
            }
        }
        return this;
    };

Usage example:

  for (var i = 0; i < targetsToRemove.length; i++) {
                            data.erase(moment(targetsToRemove[i].start).format("YYYY-MM-DD HH:mm"));
                        }

An error

Cannot read property 'indexOf' of undefined

occurs with this code, causing all objects to be removed. An unsuccessful demonstration is also provided. Any suggestions on improving this removal process are welcomed.

Your assistance is greatly appreciated.

javascript arrays object prototype

Answer 1

Answer №1

From my understanding, the remove function requires the same exact element and may not work effectively with complex elements.

I recommend using Array.prototype.filter:

var items = [{
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable to remove',
  start: moment("2018-04-06 06:00"),
  end: moment("2018-04-06 07:00"),
  allDay: false
}]

var datesToRemove = [{
  title: 'Bookable',
  start: moment("2018-04-06 06:00"),
  end: moment("2018-04-06 07:00"),
  allDay: false
}];

for (var i = 0; i < datesToRemove.length; i++) {
  var toRemove = datesToRemove[i];
  items = items.filter(function(element) {
    return element.start.valueOf() != toRemove.start.valueOf();
  });
}

console.log(items);

<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

Answer 2

From my understanding, the remove function requires the same exact element and may not work effectively with complex elements.

I recommend using Array.prototype.filter:

var items = [{
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable',
  start: moment("2018-04-05 06:00"),
  end: moment("2018-04-05 07:00"),
  allDay: false
}, {
  title: 'Bookable to remove',
  start: moment("2018-04-06 06:00"),
  end: moment("2018-04-06 07:00"),
  allDay: false
}]

var datesToRemove = [{
  title: 'Bookable',
  start: moment("2018-04-06 06:00"),
  end: moment("2018-04-06 07:00"),
  allDay: false
}];

for (var i = 0; i < datesToRemove.length; i++) {
  var toRemove = datesToRemove[i];
  items = items.filter(function(element) {
    return element.start.valueOf() != toRemove.start.valueOf();
  });
}

console.log(items);

<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>

Answer 3

Answer №2

Avoid extending the native Array prototype unnecessarily. JavaScript offers built-in methods for Array manipulation that can effectively solve your problem without risking unintended side effects associated with custom Array methods and for loops. Custom methods may mutate original data structures, hindering reusability and complicating debugging efforts in the future. Built-in Array methods maintain the integrity of original data structures by creating shallow copies during manipulation, allowing for seamless chaining of operations.

.map()
.filter()
.reduce()

Another commonly used Array manipulation method is .forEach(), which simplifies iteration without the need for traditional for loops. Unlike other methods, .forEach() does not prevent mutation of original data structures. It can be combined with other Array methods but breaks the chain once invoked.

.map(), .filter(), and .reduce() offer a functional approach to iterating over and manipulating arrays. Each method serves a unique purpose and understanding their distinctions is essential for effective chaining.

.MAP()

.map(): Similar to .forEach(), this method iterates over each item in an Array and applies a function for transformation, producing a new Array with transformed values. The length of the resulting array always matches the original, making it ideal for value transformations.

Example:

const originalArr = [1, 2, 3, 4, 5]
const incrementedArr = originalArr.map(n => n + 4)

console.log(originalArr)     // [1, 2, 3, 4, 5]
console.log(incrementedArr)   // [5, 6, 7, 8, 9]

.FILTER()

.filter(): Iterates over each item in an Array and filters based on a provided condition, returning a subset of items that meet the criteria. This method is useful for creating a new Array with a different length based on filtering conditions.

.REDUCE()

.reduce() allows for reducing an Array into an Object using specific parameters. While more complex, it complements .map() and .filter() for comprehensive manipulation.

THE SOLUTION

// Arrays containing items and dates to remove

const items = [{}, {}, {}, {}]
const datesToRemove = [{}]

// Dedupe merged arrays
const mergeUniqueMatches = catArr => catArr.filter((elem, pos, arr) => arr.indexOf(elem) == pos)
const mergedArr = mergeUniqueMatches(items.concat(datesToRemove))

// Alternative deduping method
const dedupedArr = [...new Set(mergedArr)]

// Further steps depend on clarification regarding data structure

Consider assigning unique identifiers to objects to simplify removal operations. Utilize modern ES6/7 features like destructuring to streamline array manipulations.

// Destructuring option with ES6
const destructingOptionWithES6 = { ...items, ...datesToRemove }

// Filter out unwanted items
const ideallyAllYouShouldHaveToDoIsThisFunction = items.filter(val => !datesToRemove.includes(val))

Answer 4

Avoid extending the native Array prototype unnecessarily. JavaScript offers built-in methods for Array manipulation that can effectively solve your problem without risking unintended side effects associated with custom Array methods and for loops. Custom methods may mutate original data structures, hindering reusability and complicating debugging efforts in the future. Built-in Array methods maintain the integrity of original data structures by creating shallow copies during manipulation, allowing for seamless chaining of operations.

.map()
.filter()
.reduce()

Another commonly used Array manipulation method is .forEach(), which simplifies iteration without the need for traditional for loops. Unlike other methods, .forEach() does not prevent mutation of original data structures. It can be combined with other Array methods but breaks the chain once invoked.

.map(), .filter(), and .reduce() offer a functional approach to iterating over and manipulating arrays. Each method serves a unique purpose and understanding their distinctions is essential for effective chaining.

.MAP()

.map(): Similar to .forEach(), this method iterates over each item in an Array and applies a function for transformation, producing a new Array with transformed values. The length of the resulting array always matches the original, making it ideal for value transformations.

Example:

const originalArr = [1, 2, 3, 4, 5]
const incrementedArr = originalArr.map(n => n + 4)

console.log(originalArr)     // [1, 2, 3, 4, 5]
console.log(incrementedArr)   // [5, 6, 7, 8, 9]

.FILTER()

.filter(): Iterates over each item in an Array and filters based on a provided condition, returning a subset of items that meet the criteria. This method is useful for creating a new Array with a different length based on filtering conditions.

.REDUCE()

.reduce() allows for reducing an Array into an Object using specific parameters. While more complex, it complements .map() and .filter() for comprehensive manipulation.

THE SOLUTION

// Arrays containing items and dates to remove

const items = [{}, {}, {}, {}]
const datesToRemove = [{}]

// Dedupe merged arrays
const mergeUniqueMatches = catArr => catArr.filter((elem, pos, arr) => arr.indexOf(elem) == pos)
const mergedArr = mergeUniqueMatches(items.concat(datesToRemove))

// Alternative deduping method
const dedupedArr = [...new Set(mergedArr)]

// Further steps depend on clarification regarding data structure

Consider assigning unique identifiers to objects to simplify removal operations. Utilize modern ES6/7 features like destructuring to streamline array manipulations.

// Destructuring option with ES6
const destructingOptionWithES6 = { ...items, ...datesToRemove }

// Filter out unwanted items
const ideallyAllYouShouldHaveToDoIsThisFunction = items.filter(val => !datesToRemove.includes(val))

Filter an array of objects based on criteria from another array

Answer №1

Answer №2

Similar questions

My NodeJS MongoDB application is being bombarded by an infinite loop of "Sending request..." messages from the Postman

Excluding form items that are disabled from a request in ReactJS

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

Creating a unique Angular filter involves combining different techniques and functionalities to tailor

My Discord.JS bot seems to be moving at a snail's pace, and I can

Effective technique for connecting client-side JavaScript with server-side node.js

Attempting to iterate over a JSON object and display its contents using HTML

Exploring the combination of Express router, Auth0, and plain Javascript: A guide to implementing post-login authentication on a router

Discovering the ways to declare an array type in Haskell

Tips for identifying if the function "res.end()" has been executed or not

Converting a jQuery DOM element into a string representation

Can you tell me how to display the currently utilized Node.js version and path within npm?

Utilize JavaScript to send an email containing a link and content

What is the reason behind plugins frequently neglecting to properly privatize their functions?

Problem with Handlebars: When compiling, TypeError occurs because inverse is not recognized as a function

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

What is the best way to eliminate the first, second, and final elements of an array?

Having difficulty getting the Mustache.js bundle to function properly through NPM

Order objects in a JavaScript array

Centering div elements in ASP.NET using C# and Javascript