React applying filter to array object

Question

Im creating a filtration in the E-commerce project. I have data like

const gender = ["male"]
const brand = ["adidas","nike"]
const price =[100]
//note: gender,brand,price are not static array, it can single element or more than that.

const allProducts = [
{brand:"puma",gender:"male",price:50},
{brand:"nike",gender:"male",price:90},
{brand:"adidas",gender:"female",price:110},
{brand:"adidas",gender:"male",price:95},]

Now, I want to filter all products based on gender, brand, and price. I should get all the products having gender male with brand Adidas and Nike and price less than 100.

I have achieved the result for the brand alone, like this

const[filteredprod,setFilteredprod]=useState()

allProducts.forEach((value)=>{
            for(var i=0;i<brand.length;i++){
            if(value.brand===brand?.[i])
            {setFilteredProd = value
            )}}
      })

But I want to do to brand gender price simultaneously and get the product. How can I do that? Thanks!!

Rakibul Islam Rafi · Accepted Answer · 2022-08-28 19:51:47Z

2

allProducts.filter((item)=>(item.brand === 'adidas' || item.brand === 'nike') && item.price<100 && item.gender === 'male');

For dynamically checking the condition,

allProducts.filter((item)=>brand.includes(item.brand)&& item.price<price[0] && gender.includes(item.gender));

edited Aug 28, 2022 at 19:51

answered Aug 28, 2022 at 19:29

Rakibul Islam Rafi

3281 silver badge10 bronze badges

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

4 Comments

Arman Kazi Over a year ago

I want to dynamically check the values from the array of brands, prices, and gender. you ave given static values

Arman Kazi Over a year ago

Nice, thank you! it works. This is what I was figuring out how to loop through each array at the same. I didn't know about includes() methods thanks.

Arman Kazi Over a year ago

what can be done if there are multiple price in price=[50,100] how to check less condition for each?

Rakibul Islam Rafi Over a year ago

you can use this syntax price.every((priceItem)=>item.price<priceItem) . This will test whether item.price is smaller than all the elements of the array. Also you can just check whether item.price is smaller than the largest element in price array. syntax is item.price < Math.max(...price)

msmoore · Accepted Answer · 2022-08-28 19:32:14Z

1

You can add another condition to your if statement within your forEach loop.

allProducts.forEach((value)=>{
            for(var i=0;i<brand.length;i++){
            if(value.brand===brand?.[i] && value.gender === 'male' && value.price <100)
            {setFilteredProd = value
            )}}
      })

However the more standard practice would be to use the array method filter.

allProducts.filter(({ brand, price, gender) => (brand === 'adidas' || brand === 'nike') && price < 100 && gender === 'male');

answered Aug 28, 2022 at 19:32

msmoore

4083 silver badges12 bronze badges

3 Comments

Arman Kazi Over a year ago

Ya but this will be considered a static method, the gender can be female or male while the price can be anything. I want a dynamic method to check with all te element from the arrays

msmoore Over a year ago

Then you need to pass in state values instead of the hard coded values. E.g, [dynamicPrice, setDynamicPrice] = useState(50)) ... allProducts.filter(({ brand, price, gender) => (brand === 'adidas' || brand === 'nike') && price < dynamicPrice && gender === 'male');

Arman Kazi Over a year ago

Thanks for answering. I got the solution, includes( ) in array.filter( ) works for me.

Abhi · Accepted Answer · 2022-08-28 19:27:07Z

0

Try this

const gender = ["male"]
const brand = ["adidas", "nike"]
const price = [100]

const allProducts = [{
    brand: "puma",
    gender: "male",
    price: 50
  },
  {
    brand: "nike",
    gender: "male",
    price: 90
  },
  {
    brand: "adidas",
    gender: "female",
    price: 110
  },
  {
    brand: "adidas",
    gender: "male",
    price: 95
  },
]

console.log(allProducts.filter(product => {
      if (product.gender === gender[0] && 
      product.price < price[0] &&
      (product.brand === brand[0] || product.brand === brand[1])) {
          return true
        }
        return false
      }))

answered Aug 28, 2022 at 19:27

Abhi

1,1771 gold badge13 silver badges25 bronze badges

1 Comment

Arman Kazi Over a year ago

Thanks for answering. I got the solution, includes( ) in array.filter( ) works for me.

Collectives™ on Stack Overflow

React applying filter to array object

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related