Filter array with objects based on another array

Question

How do I filter such array:

const recipes = [
{
    "id": 1,
    "name": "Boiled Egg",
    "ingredients": [
        "egg",
        "water"
    ],
},
{
    "id": 2,
    "name": "Pancakes",
    "ingredients": [
        "egg",
        "milk",
        "flour"
    ],
},
{
    "id": 3,
    "name": "Bread",
    "ingredients": [
        "flour",
        "water",
        "salt"

    ],
},
]

based on elements in such array

const selectedIngredients = ["milk", "salt"]

I played with combination of array.filter, array.some as show in Check if an array contains any element of another array in JavaScript but can't get it working properly

I want to get recipes with id 2 and 3 as a result

If you only want recipies with id `2` and `3` then you don't need second array i.e. `selectedIngredients` @sikor — DecPK, Oct 08 '21 at 22:44

Spectric · Accepted Answer · 2021-10-08T23:10:55.653

1

You can set the condition of the filter to whether selectedIngredients includes an item that is included in the item's ingredients property:

const recipes=[{id:1,name:"Boiled Egg",ingredients:["egg","water"]},{id:2,name:"Pancakes",ingredients:["egg","milk","flour"]},{id:3,name:"Bread",ingredients:["flour","water","salt"]}];

const selectedIngredients = ["milk", "salt"]

const result = !selectedIngredients.length ? [...recipes] : recipes.filter(e => selectedIngredients.some(f => e.ingredients.includes(f)))

console.log(result)

edited Oct 08 '21 at 23:10

answered Oct 08 '21 at 22:43

Spectric

30,714
6
20
43

Nice! That works but how do I get to have all recipes present when the selectedIngredients is empty? – sikor Oct 08 '21 at 23:01
@sikor I've updated my answer to include a `length` check. – Spectric Oct 08 '21 at 23:11

score 0 · Answer 2 · answered Oct 08 '21 at 22:45

const recipes = [
{
    "id": 1,
    "name": "Boiled Egg",
    "ingredients": [
        "egg",
        "water"
    ],
},
{
    "id": 2,
    "name": "Pancakes",
    "ingredients": [
        "egg",
        "milk",
        "flour"
    ],
},
{
    "id": 3,
    "name": "Bread",
    "ingredients": [
        "flour",
        "water",
        "salt"
    ],
},
]

const selectedIngredients = ["flour", "water"]

const selectAny = (list, filter) =>
  list.filter(e => e.ingredients.some(i => filter.includes(i)));

const selectAll = (list, filter) =>
  list.filter(e => filter.every(i => e.ingredients.includes(i)));

console.log('any', selectAny(recipes, selectedIngredients));
console.log('all', selectAll(recipes, selectedIngredients));

score 0 · Answer 3 · answered Oct 08 '21 at 22:51

I would do it like this

const recipes = [
    {
        id: 1,
        name: 'Boiled Egg',
        ingredients: ['egg', 'water'],
    },
    {
        id: 2,
        name: 'Pancakes',
        ingredients: ['egg', 'milk', 'flour'],
    },
    {
        id: 3,
        name: 'Bread',
        ingredients: ['flour', 'water', 'salt'],
    },
];

//

const doRebuild = (selectedIngredients)=>{
    const build = [];
    for(const two of selectedIngredients){
        for(const one of recipes){
            if(one.ingredients.some((a)=>two === a))build.push(one);
        }
    }
    return build.length > 0 ? build : ['No recipes'];
};

//

const content1 = doRebuild(['milk2', 'salt2']);
const content2 = doRebuild(['milk', 'salt']);

console.log(content1);
console.log(content2);

Filter array with objects based on another array

3 Answers3