Filtering an array with a deeply nested array in JS

Question

How can I filter an array with a deeply nested array? Given the following 2 arrays, I need the result to be an array with only the rice cakes and the gluten-free-pizza objects:

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
]

I tried the following which just returns everything (the 4 objects):

var result = foodsAvailable.filter(function(food) {
  return foodsILike.filter(function(foodILike) {
    return foodILike === food;
  })
})

result
// Array [ Object, Object, Object, Object]

Can you show example output ?

Suresh Atta
– Suresh Atta

2017-08-03 11:11:29 +00:00
Commented Aug 3, 2017 at 11:11 — Suresh Atta
– Suresh Atta, Commented Aug 3, 2017 at 11:11

Nina Scholz · Accepted Answer · 2017-08-03 11:14:18Z

13

You could use Array#some and Array#includes for checking if foodsILike contains a tag.

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [{ name: 'pasta', tags: ['delicious', 'has carbs'] }, { name: 'gluten-free-pizza', tags: ['gluten-free'] }, { name: 'pizza', tags: ['delicious', 'best meal of the year'] }, { name: 'rice cakes', tags: ['flavor-free'] }]

var result = foodsAvailable.filter(function(food) {
    return food.tags.some(function(tag) {
        return foodsILike.includes(tag);
    });
});

console.log(result);

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

answered Aug 3, 2017 at 11:14

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

4 Comments

zero_cool Over a year ago

what's a more performant way to do this? If you were deeply nested with large arrays this could get computationally expensive.

Nina Scholz Over a year ago

@zero_cool, it depends on the structure and the wanted result, like all nodes to the found item or just the item of the nested structure. maybe it could be faseter with an object or map for foodsILike. for speeding, the array methods should be avoided if speed really matters.

zero_cool Over a year ago

@NinaScholz Could you take a look at a question I've posted: stackoverflow.com/questions/51663557/… This is related to my question above

bildungsroman Over a year ago

This is great! For anyone finding this later and wanting it reformatted in ES6 like I did, it would be: const result = foodsAvailable.filter(food => food.tags.some(tag => foodsILike.includes(tag));

charlietfl · Accepted Answer · 2017-08-03 11:27:08Z

2

You are missing a length check on your inner filter and you aren't checking the tags array for the value in that inner filter

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
]

var result = foodsAvailable.filter(function(food) {
  return foodsILike.filter(function(foodILike) {
    // is value in tags array?
    return food.tags.indexOf(foodILike) >-1;
  }).length;// length acts as boolean, any length greater than zero is truthy
});

console.log(result)

edited Aug 3, 2017 at 11:27

answered Aug 3, 2017 at 11:19

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Anurag Singh Bisht · Accepted Answer · 2017-08-03 11:24:15Z

You can use array.reduce to reduce your array into desired structure, by checking for the condition i.e. foodsILike contains the tag or not.

The benefit of using array.reduce is that you can modify the structure if you want in the reduce loop itself.

const foodsILike = ['gluten-free', 'carb-free', 'flavor-free'];
const foodsAvailable = [
  { name: 'pasta', tags: ['delicious', 'has carbs']}, 
  { name: 'gluten-free-pizza', tags: ['gluten-free']}, 
  { name: 'pizza', tags: ['delicious', 'best meal of the year']},
  { name: 'rice cakes', tags: ['flavor-free']}
];

let foods = foodsAvailable.reduce((foods, food) => {
  if(foodsILike.some(f => food.tags.indexOf(f) !== -1)) {
    foods.push(food);
  }
  return foods;
},[]);

console.log(foods);

Collectives™ on Stack Overflow

Filtering an array with a deeply nested array in JS

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related