How to filter an array of objects by filtering an array inside of it in javascript

Question

I'm trying to make an advanced searching for my app, it has a stores array of objects, every store is an object and every store has an array of objects that holds the items of that store, (every item is an object). (i'll leave the stores array down so u understand what i mean)

So basically, I want the user to filter the stores by the item names, but i got stuck and whatever i tried didn't seem to be working. here is the code:

stores array:

let stores = [
  {
    name:"",
    type:"",
    items:[
      {name:"tomato", quantity:"145", unit:"g"},  //this is what i want to filter with
      {name:"other items here", quantity:"45", unit:"kg"},
      {name:"example item", quantity:"74", unit:"l"},
    ]
  }
]

The filtering way I've tried:

let userInput = "tomato";


//this outputs the original array without any filtering

    let filteredStores = stores.filter(store=>{
      return store.items.filter(item=>{
        return item.name.includes(userInput)
      })
    })

Hope someone understands how i want to filter the stores, thanks

In that case with the userInput of "tomato", the output should be [{name:"tomato", quantity:"145", unit:"g"}] — Salah Eddine Makdour
– Salah Eddine Makdour, Commented Apr 25, 2020 at 20:21
What if the store look like this- let stores = [ { name:"", type:"", items:[ {name:"tomato", quantity:"145", unit:"g"}, {name:"other items here", quantity:"45", unit:"kg"}, {name:"example item", quantity:"74", unit:"l"}, ] }, { name:"", type:"", items:[ {name:"tomato", quantity:"145", unit:"g"}, ] } ]; — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Apr 25, 2020 at 20:28

amprew · Accepted Answer · 2020-04-25 20:13:43Z

2

Array#filter will return an empty array when no matches are found. This is a truthy value, you can find this by doing !!array.filter(() => false). You need to call .length on the second filter to be able to determine whether it has found any matches or not, 0 is falsey and anything else is truthy.

answered Apr 25, 2020 at 20:13

amprew

2611 silver badge6 bronze badges

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

2 Comments

Salah Eddine Makdour Over a year ago

you mean smth like this ? return store.items.filter(item=>{ return item.name.includes("d").length }) well that gave me the same input, can u help plz

amprew Over a year ago

@SalahEddineMakdour - that is right. if you wanted to be more explicit you could add .length > 0.

Sajeeb Ahamed · Accepted Answer · 2020-04-25 21:15:01Z

1

You can try this:

let stores = [
  {
    name:"",
    type:"",
    items:[
      {name:"tomato", quantity:"145", unit:"g"},  //this is what i want to filter with
      {name:"other items here", quantity:"45", unit:"kg"},
      {name:"example item", quantity:"74", unit:"l"},
    ]
  },
 {
    name:"",
    type:"",
    items:[
      {name:"tomatos", quantity:"14", unit:"kg"},
    ]
  }
];

let UserInput = "tomato";

const res = stores.filter(({items}) => items.find(item => item.name.includes(UserInput)));

console.log(res);

.as-console-wrapper{min-height: 100%!important; top: 0}

edited Apr 25, 2020 at 21:15

answered Apr 25, 2020 at 20:38

Sajeeb Ahamed

6,4382 gold badges23 silver badges36 bronze badges

6 Comments

Salah Eddine Makdour Over a year ago

in ur code, im getting only the items as a result, i want to get the whole store that has those items, hope u understand

Sajeeb Ahamed Over a year ago

In your comment you said the output would be [{name:"tomato", quantity:"145", unit:"g"}]

Sajeeb Ahamed Over a year ago

Check my updated answer, I think this is what you are wanting.

Salah Eddine Makdour Over a year ago

oh that was a mistake, im sorry, the output would be the whole store that has the items that the user searches for , excuse me plz was a mistake

Salah Eddine Makdour Over a year ago

well now the stores only have the 1 item, i want to filter the stores with their items and return the filtered stores without any changes

|

Vahid Alimohamadi · Accepted Answer · 2020-04-25 20:21:14Z

1

let stores = [
  {
    name:"",
    type:"",
    items:[
      {name:"tomato", quantity:"145", unit:"g"},  //this is what i want to filter with
      {name:"other items here", quantity:"45", unit:"kg"},
      {name:"example item", quantity:"74", unit:"l"},
    ]
  }
]

let filterdStores = stores.filter(s=>s.items.some(i=>i.name==='tomato'));

console.log(JSON.stringify(filterdStores,null,2));

Use efficient Array.some

answered Apr 25, 2020 at 20:21

Vahid Alimohamadi

5,9883 gold badges25 silver badges42 bronze badges

3 Comments

Vahid Alimohamadi Over a year ago

@SalahEddineMakdour Array.some will break the internal block when find a match, So it won't search whole of array when saw the match. It is more performant.

Salah Eddine Makdour Over a year ago

the problem with this that when the page loads, it won't show the stores until i type smth in search bar, so when filter string is empty , it gives an empty array which i don't want

Vahid Alimohamadi Over a year ago

@SalahEddineMakdour Your fetch function must be flexible and conditional!

Collectives™ on Stack Overflow

How to filter an array of objects by filtering an array inside of it in javascript

3 Answers 3

2 Comments

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related