1

sorry for my English at the start. I have a problem with filtering a list of products posted in JSON. The code is written in react native with the use of react redux.

The object of each product looks like this:

ProductTest {
 "barcode": "barcode",
 "brand": "brand",
 "category": "category",
 "description": "description",
 "details": "details",
 "filters": Object {
   "cienkie": false,
   "farbowane": false,
   "krecone_i_puszczace": false,
   "normalne": false,
   "oslabione": false,
   "przetluszczajace": false,
   "suche_i_zniszczone": false,
   "wszystkie": true,
 },
 "id": "0",
 "image": "image",
 "ingredients": "ingredients",
 "name": "name",
},

And the "appliedFilters" list looks like this:

Object {
 "cienkie": false,
 "farbowane": false,
 "krecone_i_puszczace": false,
 "normalne": false,
 "oslabione": false,
 "przetluszczajace": false,
 "suche_i_zniszczone": false,
 "wszystkie": false,
}

I don't know how to make the "appliedFilters" list to be compared with the "filters" for each product, and to return the matching products from the list. If you have any ideas I would be greatful.

Lordareon1
  • 13
  • 2

1 Answers1

0

You can use the array filter method :

let keys = Object.keys(appliedFilters); 
let filteredList = productList.filter(product => {
  let matching = true;
  keys.forEach(key => {
   if(product.hasOwnProperty(key)){
     if(!(product.filters[key] === appliedFilters[key])) matching = false;
   }
  }
  if(matching) return product;
})

If you are sure that the attributes order of the filter and the product objects will not change, you can simplify like this :

let filteredList = productList.filter(product => JSON.stringify(product.filters) === JSON.stringify(appliedFilters))
Dan Salomon
  • 166
  • 2
  • 5
  • ok. there is only one filter correctly applied to the list, and I need that in a situation when appliedfilters has several values with true, all matching products will show up. For example: `appliedfilters: { Object { "cienkie": true, "farbowane": true, } } PRODUCTS: { ProductTest1 { "filters": Object { "cienkie": true, "farbowane": false, } } ProductTest2 { "filters": Object { "cienkie": false, "farbowane": true, } } } return Array [ProductTest1; ProductTest2];` – Lordareon1 Mar 10 '22 at 21:37
  • So, you want the products that match at least one filter ! Change this line `let matching = true;` to `let matching = false;` and this one `if(!(product.filters[key] === appliedFilters[key])) matching = false;` to `if(product.filters[key] === appliedFilters[key]) matching = true;` – Dan Salomon Mar 11 '22 at 03:34
  • This way returns nothing. **First one:** `let matching = true; keys.forEach((key) => { if (product.filters.hasOwnProperty(key)) { if (!(product.filters[key] === appliedFilters[key])) matching = false; } });` Returns products that match only one filter. if more than one filter is selected returns empty array. – Lordareon1 Mar 11 '22 at 17:48
  • **Second one:** `let matching = false; keys.forEach((key) => { if (product.filters.hasOwnProperty(key)) { if ((product.filters[key] === appliedFilters[key])) matching = true; } });` Returns the entire list of products, no matter which filter I choose. When more than one product is selected, the entire list of products is also returned. – Lordareon1 Mar 11 '22 at 17:48