How to filter by one or more parameters?

Question

JavaScript

I have an example array of objects:

data = [

  { bg: 'black', color: 'green' },
  { bg: 'black', color: 'green' },
  { bg: 'black', color: 'red' },
  { bg: 'black', color: 'red' },

  { bg: 'white', color: 'green' },
  { bg: 'white', color: 'green' },
  { bg: 'white', color: 'red' },
  { bg: 'white', color: 'red' }
  
]

And there are 2 filters:

The goal is this.
When the first filter is selected, for example background black , it will only output:

[
    { bg: 'black', color: 'green' },
    { bg: 'black', color: 'green' },
    { bg: 'black', color: 'red' },
    { bg: 'black', color: 'red' }
]

And when another filter is added to this, for example color red , it will, accordingly, produce:

[
    { bg: 'black', color: 'red' },
    { bg: 'black', color: 'red' }
]

Actually, how to implement it?
I set filters in something like this:

filters = {
  bg: 'white', // or 'none', or 'black'
  color: 'none', // or 'red, or 'green'
}

Answer 1

https://jsfiddle.net/3pb51azj/

Answer 2

const filterColor = chosedColor => currColor => chosedColor === 'none' ? true : currColor === chosedColor
arr.filter(filterColor(inputValue1)).filter(filterColor(inputValue2))

more or less like this