How to filter in two deep arrays

Question

I'm looking to filter in two deep arrays, actually my JSON:

{
  "0": {
    "product":[{
      "uuid":"uid",
      "name":"Rice"
    },
    {
      "uuid":"uid",
      "name":"Pasta"
    }]
  },
  "1": {
    "product":[{
      "uuid":"uid",
      "name":"Milk"
    }]
  }
}

I would like to get something like that when I filter with the word "ric":

{
  "0": {
    "product":[{
      "uuid":"uid",
      "name":"Rice"
    }]
  }
}

But I got this result:

{
  "0": {
    "product":[{
      "uuid":"uid",
      "name":"Rice"
    },
    {
      "uuid":"uid",
      "name":"Pasta"
    }]
  }
}

My code:

dataSort.categories = the json and event.target.value.toLowerCase() = the specific word

dataSort.categories.filter(s => s.products.find(p => p.name.toLowerCase().includes(event.target.value.toLowerCase())));

Answer 1

You can achieve this with a combination of reduce and filter

 var input = { "0": { "product":[{ "uuid":"uid", "name":"Rice" }, { "uuid":"uid", "name":"Pasta" }] }, "1": { "product":[{ "uuid":"uid", "name":"Milk" }] } } var search = "ric" var result = Object.entries(input).reduce( (acc, [key,val]) => { found = val.product.filter(x => x.name.toLowerCase().includes(search.toLowerCase())) if(found.length){ acc[key] = {...val, product: found} } return acc },{}) console.log(result)

Answer 2

There is many approach to do this, one is to map your top level array to the subArrays filtered results then filter it after:

dataSort.categories
  .map(s => s.products.filter(p => p.name.toLowerCase().includes(event.target.value.toLowerCase())))
  .filter(s => !!s.products.length);

You may also prefer to get a "flat" array as result because it is easier to use after:

dataSort.categories
  .reduce((acc, s) => [...acc, s.products.filter(p => p.name.toLowerCase().includes(event.target.value.toLowerCase()))], []);

Answer 3

Please find below the code to filter out values inside the product.name and only return the value which are matching the equality condition in product array.

 const json = [ { product: [ { uuid: "uid", name: "Rice", }, { uuid: "uid", name: "Pasta", }, ], }, { product: [ { uuid: "uid", name: "Milk", }, ], }, ]; const inputValue = "rIc"; const filteredArray = []; json.map((s) => { const item = s.product.find((p) => p.name.toLowerCase().includes(inputValue.toLowerCase()) ); item && filteredArray.push({ product: item }); }); console.dir(filteredArray);

Answer 4

Your dataset is an Object , not an Array and the filter is an Array method. You can use reduce by looping on the object values by Object.values then filter your products array.

 const data = { '0': { product: [ { uuid: 'uid', name: 'Rice', }, { uuid: 'uid', name: 'Pasta', }, ], }, '1': { product: [ { uuid: 'uid', name: 'Milk', }, ], }, }; const keyword = 'ric'; const dataset = Object.values(data); const results = dataset.reduce((acc, item, index) => { const search = keyword.toLowerCase(); const product = item.product.filter(product => product.name.toLowerCase().includes(search)); if (product.length) acc[index] = {...item, product }; return acc; }, {}); console.log(results);