How can I filter based on multiple values in Javascript

Question

How can I filter based on multiple values in Javascript.

I want to make a frontend filter in react where all value is a select field except name its a search Input.

const data = [
  {
    name: "anna",
    group: "group 1",
    house: "green",
    subject: "math"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "science"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "physics"
  },
  {
    name: "holly",
    group: "group 1",
    house: "green",
    subject: "chemistry"
  }
]

Expectation:

selecting "group 1" and "green" should result in

[
  {
    name: "anna",
    group: "group 1",
    house: "green",
    subject: "math"
  },
  {
    name: "holly",
    group: "group 1",
    house: "green",
    subject: "chemistry"
  }
]

selecting "mike", "group 2" and "blue" should result in

[
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "science"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "physics"
  }
]

Selecting nothing should render whole array

Thank you.

@ScottSauyet I tried using .filter() with & and | conditions. Didn't worked. — Shreyas Chorge, Sep 23 '21 at 20:15
Part of the contract here on SO is showing your own work. That's why you see comments like mine. Next time, even if it's not working, show the best effort you've made so far and explain what it's not doing properly, and you will likely get better and quicker answers. — Scott Sauyet, Sep 23 '21 at 20:16
The answer I was writing before this was (properly) closed as a duplicate is now posted on [that question](https://stackoverflow.com/a/69306883). I think it offers two separate useful APIs. — Scott Sauyet, Sep 23 '21 at 21:07

score 0 · Answer 1 · answered Sep 23 '21 at 20:15

0

You can do like this

data.filter(x=>x.group=='group 1'&& x.house=="green")

var data = [
  {
    name: "anna",
    group: "group 1",
    house: "green",
    subject: "math"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "science"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "physics"
  },
  {
    name: "holly",
    group: "group 1",
    house: "green",
    subject: "chemistry"
  }
]

var result = data.filter(x=>x.group=='group 1'&& x.house=="green")
console.log(result)

answered Sep 23 '21 at 20:15

Sourabh Somani

2,138
1
13
27

I don't really think that OP has requested filtering by this particular properties with these particular values. I would rather assume that their intention was **arbitrary** subset (including empty one) of properties and values. (and it wasn't mine downvote, just in case) – Yevhen Horbunkov Sep 23 '21 at 20:21
according to his last comment I thought that he is using bitwise and and bitwise or. That's why I given this answer. That is what I thought. – Sourabh Somani Sep 24 '21 at 05:21

score -1 · Answer 2 · answered Sep 23 '21 at 20:20

-1

const data = [
  {
    name: "anna",
    group: "group 1",
    house: "green",
    subject: "math"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "science"
  },
  {
    name: "mike",
    group: "group 2",
    house: "blue",
    subject: "physics"
  },
  {
    name: "holly",
    group: "group 1",
    house: "green",
    subject: "chemistry"
  }
];

function filterArr(v1='', v2='', v3='', v4=''){

  return data.filter(f=>{
    return (f.name).includes(v1) && (f.group).includes(v2) && (f.house).includes(v3) && (f.subject).includes(v4);
  });

}

let arr = filterArr('mike', 'group 2');

console.log(arr);

answered Sep 23 '21 at 20:20

akicsike

371
2
8

Man, you'd go in lots of troubles if there were few dozens of fields in that table (and it wasn't mine downvote, just in case) – Yevhen Horbunkov Sep 23 '21 at 20:22
@YevgenGorbunkov This example is not about hundreds of fields, but only four, which is why I wrote this example – akicsike Sep 23 '21 at 20:27
Did you happen to hear about loops? – Yevhen Horbunkov Sep 23 '21 at 20:31
@YevgenGorbunkov What is it? are you having a bad day? – akicsike Sep 23 '21 at 20:40
Mate, it's totally the opposite - I had a lot of fun, especially during the last 20 minutes. Really, I'm trying to deliver here one simple message (with a bit of joke, though): your code is rigid and for a table of few dozens fields it will look ridiculously clunky. I don't even try to be offensive here, trust me :) – Yevhen Horbunkov Sep 23 '21 at 20:48
Consider something, like this as an example of what I am talking about: `const multiFilter=(arr,obj)=>arr.filter(_obj=>Object.keys(obj).every(key=>_obj[key].toLowerCase().includes(obj[key].toLowerCase())))` – Yevhen Horbunkov Sep 23 '21 at 20:51
@YevgenGorbunkov If the question had been about hundreds of data, I would have written differently – akicsike Sep 23 '21 at 20:54

How can I filter based on multiple values in Javascript

2 Answers2