How to filter the array by multiple values from another array

Question

I have two arrays and want to filter the result from data array.

var data = [{"role":"Frontend", "languages": ["HTML", "CSS", "JavaScript"]},{"role":"Fullstack", "languages": ["JavaScript"]}]
var selectItem = ["CSS"];

Objects are added to selectItem[] once they data are selected from an UI.

I want to output by filtering from the data array against selectItem.

But the selectItem can have the values from both role and languages.

Like:

var selectItem = ["Frontend","CSS"];

I have tried to filter out the result:

  var users = this.myJson.filter(
        (el) =>
          this.selectItem.includes(el.role) ||
          el.languages.some((e1) => this.selectItem.indexOf(e1) >= 0)
      );
      console.log(users);

So, how can filter the data array with multiple keys? This query is filtering from the languages but not filtering the values from the role.

Update:

The query I tried was working but when the new item is added on the selectedItem like:

 var selectItem = ["Frontend","CSS", "HTML"];

It is still returning all the values because it contains the CSS.

So I want to filter the result if it contains all the tags that is CSS and HTML and Frontend in the data.

var data = [
{"role":"Frontend", "languages": ["HTML", "CSS", "JavaScript"]},
{"role":"Fullstack", "languages": ["JavaScript"]},
{"role":"Frontend", "languages": ["CSS","JavaScript"]}

]

var selectItem = ["Frontend","CSS", "HTML"];

var users=data.filter(el => selectItem.length &&
   (selectItem.includes(el.role) ||
    el.languages.some(e1 => selectItem.includes(e1)) )
);
console.log(users);

My expected output is:

[{
  languages: ["HTML", "CSS", "JavaScript"],
  role: "Frontend"
}]

What is the best way of filtering with the multiple keys from array object?

so what is wrong with what you have? Is it an OR or does everything have to match in the search criteria? — epascarello
– epascarello, Commented Sep 15, 2020 at 17:02
It would be easier and more performant if the languages was transformed to a Set. — Anthony Garcia-Labiad
– Anthony Garcia-Labiad, Commented Sep 15, 2020 at 17:03

Carsten Massmann · Accepted Answer · 2020-09-16 07:19:57Z

1

Contrary to what I read from your first attempt, you are looking for those elements that fulfill all of the keyword-conditions and not just some of them. I changed my answer again to fulfill this requirement:

var data = [
{"role":"Frontend", "languages": ["HTML", "CSS", "JavaScript"]},
{"role":"Fullstack", "languages": ["JavaScript"]},
{"role":"Frontend", "languages": ["CSS","JavaScript"]}];

var sel = ["Frontend","CSS","HTML"];

var users=data.filter(el => {
  if (sel&&sel.length){
//  let elall=[el.role].concat(el.languages);
    let elall=[el.role,...el.languages]; // <-- Aakash Bashyal <3
    return sel.every(se=>elall.includes(se))
  }
});
console.log(users);

In my code I create a local temporary array elall that contains all of the keywords in an element from both attributes (role and languages). Now, the .every() method on sel checks whether every keyword in sel is found in the elall array.

edited Sep 16, 2020 at 7:19

answered Sep 15, 2020 at 17:10

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Rasik Over a year ago

yeah, I found that is working when there are values, but how to filter with includes when the selectItem is empty or null? i had checked while there were not values so it was giving a error.

Carsten Massmann Over a year ago

That is easy - see my modified answer - simply include a selectItem.length && ... into the .filter() function.

Carsten Massmann Over a year ago

... changed my answer again - please check! ;-)

Rasik Over a year ago

just a small question, what could be the differences in your choice of using concat over spread operator in the same solution?

Carsten Massmann Over a year ago

Oh, I was just being "old-fashioned"! ;-) The spread operator works just as well and is more compact!

|

Ravi · Accepted Answer · 2020-09-15 17:08:13Z

0

This will give the desired result:

data.filter(d => 
    selectItem.includes(item => item == d.role) || 
    selectItem.some(item => d.languages.find(lang => lang == item))
);

edited Sep 15, 2020 at 17:08

answered Sep 15, 2020 at 17:02

Ravi

2,2912 gold badges18 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to filter the array by multiple values from another array

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related