0
votes

I have an app the will make a recipes data base where the user will enter the ingredients he has and the app should return the recipes available with this kind of combinations, the user has entered.

Once I have the recipe objects with many key/value information:

 const [recipes, setRecipes] = useState([
    { id: 1, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Prato principal', name: 'pão de forma', key: '1', ingredients: ['sal', 'ovo', 'mantega', 'maionese', 'farinha'] },
    { id: 2, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Entrada', name: 'macarrao ao molho branco', key: '2', ingredients: ['macarrao', 'oleo', 'creme de leite'] },
    { id: 3, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Salada', name: 'Arroz marroquino', key: '3', ingredients: ['A', 'B', 'C'] },
    { id: 4, easyOfPrepare: 'facil', author: 'www.', category: 'Doce', type: 'Sobremesa', name: 'Bolo', key: '4', ingredients: ['farinha', 'açucar', 'etc'] },
    { id: 5, easyOfPrepare: 'facil', author: 'www.', category: 'Doce', type: 'Bolo', name: 'doce de leite', key: '5', ingredients: ['AA', 'BB', 'CC'] },
  ])

the user input is saved at another object

const [ingredients, setIngredients] = useState(['farinha', 'ovos', 'leite'])

const addIngredients = e => {
  e.preventDefault();
  setIngredients(prevIngredient => [...prevIngredient, name]);
}

this addingredients is called, once the user has informed the expected ingredient.

Once the user has typed the follow combination: 'sal', 'ovo', 'mantega', 'maionese', 'farinha', how could I filter these ingredients against the recipes to define that the only one possible with this combination is the first one?

Thanks!

3

3 Answers

2
votes

Leveraging array's methods:

const recipes = [
  { id: 1, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Prato principal', name: 'pão de forma', key: '1', ingredients: ['sal', 'ovo', 'mantega', 'maionese', 'farinha'] },
  { id: 2, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Entrada', name: 'macarrao ao molho branco', key: '2', ingredients: ['macarrao', 'oleo', 'creme de leite'] },
  { id: 3, easyOfPrepare: 'facil', author: 'www.', category: 'Salgada', type: 'Salada', name: 'Arroz marroquino', key: '3', ingredients: ['A', 'B', 'C'] },
  { id: 4, easyOfPrepare: 'facil', author: 'www.', category: 'Doce', type: 'Sobremesa', name: 'Bolo', key: '4', ingredients: ['farinha', 'açucar', 'etc'] },
  { id: 5, easyOfPrepare: 'facil', author: 'www.', category: 'Doce', type: 'Bolo', name: 'doce de leite', key: '5', ingredients: ['AA', 'BB', 'CC'] },
];
const userInput = ['sal', 'ovo', 'mantega', 'maionese', 'farinha'];

const result = recipes.filter(recipe => userInput.every(i => recipe.ingredients.includes(i)));


console.log(result.length); // 1
0
votes

You could use the filter and the includes methods to achieve this:

const matchedRecipes = recipes.filter(recipe => {
  for (ingredient in ingredients) {
    if (!recipe.ingredients.includes(ingredient)) {
      return false
    }
  }
  return true
})
0
votes

You can filter out the ingredients based on the recipes

const filteredRecipes = recipes.filter(recipe => {
   return ingredients.every(ingredient => recipe.ingredients.includes(ingredient))
})