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;
} }) },
  );

Could you please share what have you tried so far to achieve this? — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Aug 9, 2020 at 10:53

Jon_Mai · Accepted Answer · 2020-08-09 14:31:20Z

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 '.

edited Aug 9, 2020 at 14:31

answered Aug 9, 2020 at 11:02

Jon_Mai

415 bronze badges

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

7 Comments

Stefani Toto Over a year ago

This is giving an empty array unless the word is exactly dish 1.

Jon_Mai Over a year ago

I just checked and the example gave an array filtered by 'dish 1 ', what have you tried? what you filter by?

Jon_Mai Over a year ago

sorry found a missing "}" fixed it - try now :)

Jon_Mai Over a year ago

just notice that the example is by the data you uploaded and have space after dish 1 => 'dish 1 '

Stefani Toto Over a year ago

still it will give an result only if its full name. i want to filter with characters too.

|

Sascha A. · Accepted Answer · 2020-08-09 11:51:49Z

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'));

i want to return lista_categoria_food array as structure but containing only filtered objects
Do you want to have elements in your list which haven't after filtering any elements in list_food or not? At the moment I cut this elements out.

Minal Shah · Accepted Answer · 2020-08-09 11:05:07Z

0

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
  })

edited Aug 9, 2020 at 11:05

answered Aug 9, 2020 at 10:57

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

6 Comments

Stefani Toto Over a year ago

i have tried this and gives and empty array with length 0.

Stefani Toto Over a year ago

Thank you. In this case the structure of temp and lista_categoria_food it will be different and this will not update my interface.

David Fontes Over a year ago

@MinalShah The filter method callback requires the return of a boolean value, you are always returning an array which will always evaluate to true.

Minal Shah Over a year ago

If you want to keep the same array, you can just replace temp with your own array. This would achieve your goal.

Stefani Toto Over a year ago

@MinalShah the array lista_categoria_food it has a specific structure and cant be pushed directly the food. temp1.push(food)

|

Amir Popovich · Accepted Answer · 2020-08-09 11:12:29Z

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);

i want to return lista_categoria_food array as structure but containing only filtered objects

Carsten Massmann · Accepted Answer · 2020-08-09 12:08:47Z

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>

i want to return food array as structure but containing only filtered objects
The new version of my script will return an array of exactly the same structure as the input, but the contained list_food-arrays are filtered and will contain only items that match the given filter string.

Collectives™ on Stack Overflow

How to filter an array of multiple objects?

5 Answers 5

7 Comments

3 Comments

6 Comments

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

3 Comments

6 Comments

1 Comment

2 Comments

Related