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
– DecPK, Commented Oct 8, 2021 at 22:44

Spectric · Accepted Answer · 2021-10-08 23:10:55Z

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 8, 2021 at 23:10

answered Oct 8, 2021 at 22:43

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

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

2 Comments

sikor Over a year ago

Nice! That works but how do I get to have all recipes present when the selectedIngredients is empty?

Spectric Over a year ago

@sikor I've updated my answer to include a length check.

Christian Fritz · Accepted Answer · 2021-10-08 22:45:22Z

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

Vadim · Accepted Answer · 2021-10-08 22:51:51Z

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

Collectives™ on Stack Overflow

Filter array with objects based on another array

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related