Comparing arrays of objects to filter against each other?

Question

Comparing arrays of objects to filter against each other?

customerItems: [
  {
    label: "itemA",
    serialNumber: 123
  },
  {
    label: "testItem",
    serialNumber: 44
  }
]

otherItems: [
  {
    label: "anotherItem",
    serialNumber: 44
  },
  {
    label: "testItem",
    serialNumber: 21
  }
]

I am interested in looping through customerItems, which is an array of objects. My goal is to filter the customerItems based on whether their serial number matches an item in another array of objects called otherItems. For instance, the desired result in this case should be:

  {
    label: "testItem",
    serialNumber: 44
  }

since otherItems has a matching serialNumber of 44.

I considered iterating through otherItems and creating an array of serial numbers, then looping through that using forEach, but I feel like there may be a more efficient way to achieve this.

javascript arrays

Answer 1

Answer №1

First, create a new indexed Set containing the values to use for filtering. This Set will be based on the id property from the otherProducts array. Then, apply this Set to filter the customerProducts array.

const customerProducts = [{name: "foo", id: 123}, {name: "test", id: 44}]

const otherProducts = [{name: "other", id: 44}, {name: "test", id: 21}]

const otherProductIds = new Set(otherProducts.map(({ id }) => id))

const filteredCustomerProducts = customerProducts.filter(({ id }) =>
  otherProductIds.has(id))

console.info(filteredCustomerProducts)

Answer 2

First, create a new indexed Set containing the values to use for filtering. This Set will be based on the id property from the otherProducts array. Then, apply this Set to filter the customerProducts array.

const customerProducts = [{name: "foo", id: 123}, {name: "test", id: 44}]

const otherProducts = [{name: "other", id: 44}, {name: "test", id: 21}]

const otherProductIds = new Set(otherProducts.map(({ id }) => id))

const filteredCustomerProducts = customerProducts.filter(({ id }) =>
  otherProductIds.has(id))

console.info(filteredCustomerProducts)

Answer 3

Answer №2

To achieve this, utilize the array functions filter and some.

customerProducts.filter((x)=> otherProducts.some(y=> y.id === x.id));

Explanation: The filter function iterates over each element in the otherProducts array and checks if the id of customerProduct exists in otherProducts for at least one element.

Answer 4

To achieve this, utilize the array functions filter and some.

customerProducts.filter((x)=> otherProducts.some(y=> y.id === x.id));

Explanation: The filter function iterates over each element in the otherProducts array and checks if the id of customerProduct exists in otherProducts for at least one element.

Answer 5

Answer №3

Create two JS array variables named customerProducts and otherProducts. Implement the JS Array functions filter and find to manipulate the arrays.

let customerProducts = [
  {
    name: "foo",
    id: 123
  },
  {
    name: "test",
    id: 44
  }
]

let otherProducts = [
  {
    name: "other",
    id: 44
  },
  {
    name: "test",
    id: 21
  }
];

let filtered = customerProducts.filter( el => otherProducts.find( e => e.id == el.id) )

console.log(filtered);

Answer 6

Create two JS array variables named customerProducts and otherProducts. Implement the JS Array functions filter and find to manipulate the arrays.

let customerProducts = [
  {
    name: "foo",
    id: 123
  },
  {
    name: "test",
    id: 44
  }
]

let otherProducts = [
  {
    name: "other",
    id: 44
  },
  {
    name: "test",
    id: 21
  }
];

let filtered = customerProducts.filter( el => otherProducts.find( e => e.id == el.id) )

console.log(filtered);

Comparing arrays of objects to filter against each other?

Answer №1

Answer №2

Answer №3

Similar questions

Restrict the character count in Vue Material chips

What could be the reason for my Node.js Express response coming back as empty?

Is Socket.io exclusive to browsers?

Webpage video stalling due to buffering

Learn the process of transmitting JSON data from a server-side (nodejs) to the client-side using Ajax

What is the method for creating an array of strings in VueJS?

Custom filtering in jqGrid with an integrated filtering toolbar

Issue with disabling checkboxes in jsTree

The issue of elements flickering while being hidden and shown with jQuery has been observed in both Chrome and

Could use some help with configuring express routes with parameters

React-dropzone experiencing delays in loading new files for readers

Populate HTML form with return values using jQuery AJAX

AngularJS version 1.2.0 is experiencing an issue where the $http service is not properly sending requests

Transferring the selected radio button from one HTML page to another without using PHP

jQuery sidebar with a fixed position

Issue with making requests across origins in Vuejs using axios

Generate a custom image using a pre-existing background image and text using JavaScript, then save it as a JPEG file in

Unable to retrieve the array from the JSON data

Deactivating a Vue custom filter when hovering over it

What is the best way to incorporate a state variable into a GraphQL query using Apollo?