'More efficient way to filter products
I have an array of products that are input into a state called "products" that are the filtered versions of "baseProducts" formatted like this
{
"data": {
"field_product_series": "sc950",
"field_product_roll_size": "15-x-10-yds",
"field_product_width": null,
"field_product_width_in": "15",
"field_product_length": null,
"field_product_length_in_yards": "10",
"field_product_finish": "gloss",
"field_product_color": "bright-gold-metallic",
"field_product_color_number": "213",
"field_product_durability": "10-years",
"field_product_vinyl_class": "g31a",
"sku": "ASC950-213-1510P",
"title": "15'' x 10 yards Avery SC950 Gloss Bright Gold 10 year Long Term Punched 2.0 Mil Metallic Cast Cut Vinyl (Color Code 213)"
}
}
I am trying to be able to filter products based off of a list of fields. I am currently filtering the products like this
const filteredProducts = baseProducts.filter(product =>
(filters.includes(product.data.field_product_roll_size))
|| (filters.includes(product.data.field_product_width_in))
|| (filters.includes(product.data.field_product_length_in_yards))
|| (filters.includes(product.data.field_product_series))
|| (filters.includes(product.data.field_product_color))
|| (filters.includes(product.data.field_product_color_number))
|| (filters.includes(product.data.field_product_finish)));
setProducts(filteredProducts);
For example selecting 'roll size' adds that size to the filters state and baseProducts is being filtered by the updated filters state. I know this is inefficient and it really turns into a headache if I try to be able to select multiple filters which I am trying like so
if (filters.length == 2) {
const filteredProducts = baseProducts.filter(product =>
(filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_width_in))
|| (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_color))
|| (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_length_in_yards))
|| (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_series))
|| (filters.includes(product.data.field_product_roll_size) && filters.includes(product.data.field_product_color_number))
setProducts(filteredProducts);
I have over 10k products and want to be able to use at least 8 filters, it is getting more complicated and I am struggling to find a better way to filter, any help is appreciated
I have a demo set up here http://gatsby.htm-mbs.com:8000/cast-vinyl
and the full repo is here https://github.com/nicholastorr/gatsby-d7/blob/master/src/components/Sidebar.js but it is very messy, trying to focus on optimizing filters first
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
