How to filter an array of multiple objects?

Question

I have an array of multiple objects that is mocked and want to filter based on t_name_food.

this.lista_categoria_food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1 ',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ]

The filter should retrun the list of products that match in t_name_food.

Until now have tried to filter items of object.

this.lista_categoria_food = this.filterFeeds.forEach((item) => {
      item.list_food.filter(e => 
   { 
  if(e.t_name_food.toLowerCase().includes(searchTerm.toLowerCase())) {
  return e;
} }) },
  );

Answer 1

EDITED filtered by an included string in t_name_food =>

let filtered = [];

this.lista_categoria_food.forEach(val => {
    val.list_food = val.list_food.filter(innerVal => {
         return innerVal.t_name_food.includes('dish 1')
       });
    if(val.list_food.length > 0) filtered.push(val);
});

now filtered holds the new array holding only the necessary t_name_food.

Filter by a specific string =>

You can filter by t_name_food like this:

let filtered = this.lista_categoria_food.filter(val => {
    return val.list_food.filter(innerVal => {
        return innerVal.t_name_food === ('dish 1 ')}
    ).length > 0
});

the outer filter is filtered by the length of the inner filter list length. I double filter the dishes.

in the example above I have filtered it by 'dish 1 '.

Answer 2

Edited

This snippet allows you to enter a search string in an input field. The resulting object is printed in the console via console.log.

[[ The "cloning" step is crucial in my script! If you left it out the function will seem to work at first, but after the first filter operation the source object will be changed permanently. ]]

const pre=document.querySelector('pre');
document.querySelector('input').oninput=ev=>{
  const res=food.map(f=>{
    let ff={...f}; // clone each f object for later filtering
    ff.list_food=ff.list_food.filter(lf=> // filter list_food
      lf.t_name_food.match(new RegExp(ev.target.value,'i')));
    return ff;})
  console.log(res); // or do with it, whatever you like ...
}

const food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1 ',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ]

.as-console-wrapper {max-height:90% !important}

<input type="text">
<pre></pre>

Answer 3

Extended:Now with letting the complete structure of the list and only showing the filtered items.

Iterate with forEach over your array lista_categoria_food and filter than for t_name_food on the array from property list_food from every object.
If there is at least 1 hit build a new res-object add these hits and complete the object with the other key/value-pairs from the origin-object. Collect all theses objects and return them.

 function foodFilter(list, food) {
     let result = [];
     list.forEach(elem => {
         let list_food = elem.list_food.filter(obj => obj.t_name_food==food);
         if (list_food.length) {
             let res = {list_food: list_food};
             Object.keys(elem).map( key => {
                 if (key != "list_food") res[key] = elem[key];
             });
             result.push(res);
         }
     });
     return result;
 }

lista_categoria_food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ];
      
console.log(foodFilter(lista_categoria_food, 'food 2'));
console.log(foodFilter(lista_categoria_food, 'dish 1'));

Answer 4

Use Array.prototype.filter and Array.prototype.some in order to filter:

const lista_categoria_food = [
      {
        n_id: 1, 
        t_nome_categorie: 'Main Dishes',
        t_image: 'Service.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'dish 1 ',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

          { n_id: 2, 
          t_name_food: 'dish 2',
          t_price_food: 20, 
          n_quantity: 0, 
          t_quantity: 'piece' },

        ]
      },
      {
        n_id: 2, 
        t_nome_categorie: 'Appetizers',
        t_image: 'restaurant.jpg',
        list_food: [
          { n_id: 1, 
          t_name_food: 'food 1',
          t_price_food: 20,
          n_quantity: 0,
          t_quantity: 'piece' },
           { n_id: 2, 
           t_name_food: 'food 2',
           t_price_food: 20, 
           n_quantity: 0, 
           t_quantity: 'piece' },

        ]
      },
      ];
      
      
    const filtered = lista_categoria_food.filter(({list_food}) => list_food.some(({t_name_food}) => t_name_food === 'food 1'));
    
    console.log(filtered);

Answer 5

you can use .filter method to filter out the data that you want. Please try the following approach to get your required data.

let temp = this.lista_categoria_food.filter((data)=>{
 let temp1=[];
data.list_food.forEach((food)=>{
  if(food.t_name_food==this.myMatch)
  {temp1.push(food)}
   } 
  return temp1
  })