0

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:

  1. 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"
  }
]
  1. 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"
  }
]
  1. Selecting nothing should render whole array

Thank you.

Improve this question
5
  • What have you tried so far yourself? Commented Sep 23, 2021 at 20:09
  • @ScottSauyet I tried using .filter() with & and | conditions. Didn't worked. Commented Sep 23, 2021 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. Commented Sep 23, 2021 at 20:16
  • 1
    The answer I was writing before this was (properly) closed as a duplicate is now posted on that question. I think it offers two separate useful APIs. Commented Sep 23, 2021 at 21:07
  • @ScottSauyet I understand. Thank you. Commented Sep 24, 2021 at 12:23

2 Answers 2

Reset to default
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)

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

2 Comments

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)
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.
-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);

Improve this answer

7 Comments

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)
@YevgenGorbunkov This example is not about hundreds of fields, but only four, which is why I wrote this example
Did you happen to hear about loops?
@YevgenGorbunkov What is it? are you having a bad day?
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 :)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.