Navigate back to the homepage

How to filter array of objects with another array of objects in javascript?

Infinitbility
JavaScript
March 12th, 2022 · 1 min read
keep affilitate

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to filter the array of objects by another array of objects with sample code of EcmaScript 6 and the old version also.

Lots of times we need to filter an array of objects by another array of objects and here we write multiple loops with push do a task which is ok for older versions, but now we have a better way to do it.

The following example will work if you are using EcmaScript 6 or the upper version, here we have used EcmaScript 6 filter() and some() methods.

  • The filter() method creates a new array with all elements that pass the test implemented by the provided function.

  • The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn’t modify the array.

1const myArray = [
2 { userid: "100", projectid: "10", rowid: "0" },
3 { userid: "101", projectid: "11", rowid: "1"},
4 { userid: "102", projectid: "12", rowid: "2" },
5 { userid: "103", projectid: "13", rowid: "3" },
6 { userid: "101", projectid: "10", rowid: "4" }
7];
8const myFilter = [
9 { userid: "101", projectid: "11" },
10 { userid: "102", projectid: "12" },
11 { userid: "103", projectid: "11"}
12];
13
14const myArrayFiltered = myArray.filter((el) => {
15 return myFilter.some((f) => {
16 return f.userid === el.userid && f.projectid === el.projectid;
17 });
18});
19
20console.log(myArrayFiltered);

Output

JavaScript, filter array of objects examples
JavaScript, filter array of objects examples

Are you using the old version of EcmaScript follow the below example it will surely work for you because it’s isn’t using any EcmaScript 6.

Here, we are using multiple loops with the push method to create a filtered separate array.

1const myArray = [
2 { userid: "100", projectid: "10", rowid: "0" },
3 { userid: "101", projectid: "11", rowid: "1"},
4 { userid: "102", projectid: "12", rowid: "2" },
5 { userid: "103", projectid: "13", rowid: "3" },
6 { userid: "101", projectid: "10", rowid: "4" }
7];
8const myFilter = [
9 { userid: "101", projectid: "11" },
10 { userid: "102", projectid: "12" },
11 { userid: "103", projectid: "11"}
12];
13
14let filtered = [];
15
16for(let arr in myArray){
17 for(let filter in myFilter){
18 if(myArray[arr].userid == myFilter[filter].userid && myArray[arr].projectid == myFilter[filter].projectid){
19 filtered.push(myArray[arr]);
20 }
21 }
22}
23console.log(filtered);

Output

JavaScript, filter array of objects examples
JavaScript, filter array of objects examples

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

melio affilitate

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

How to use for loop in typescript?

TypeScript, all types of for loops examples.

March 11th, 2022 · 1 min read

How to add layer in photopea?

Photopea, add another or new layer example.

March 6th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]