Searching for an array of objects containing nested arrays in JavaScript

Question

Searching for an array of objects containing nested arrays in JavaScript

I've been struggling with this function for two days and still can't get it right. I need the function to only return objects that meet all filter criteria in the array. The issue is that it should only return objects that satisfy every filter.

Here are my filters:

const myFiltersIngredients = ['flour', 'chicken']

And here are the objects in my array:

    const myRecipes = [
  {
    name: 'grandma's pie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'grams',
        ingredientQuantity: 500
      },
      {
        ingredient: 'chicken',
        ingredientUnit: 'grams',
        ingredientQuantity: 500
      }
    ]
  },
  {
    name: 'cookie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'grams',
        ingredientQuantity: 500
      },
      {
        ingredient: 'butter',
        ingredientUnit: 'grams',
        ingredientQuantity: 500
      }
    ]
  }
]

javascript arrays object filter

Answer 1

Answer №1

const myFiltersIngredients = ['rice', 'chicken'];

const myDishes = [{
        name: 'grandma's pie',
        ingredients: [{
                ingredient: 'rice',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            },
            {
                ingredient: 'chicken',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            }
        ]
    },
    {
        name: 'cookie',
        ingredients: [{
                ingredient: 'rice',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            },
            {
                ingredient: 'butter',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            }
        ]
    }
];

const mySelectedDishes = myDishes.filter(({
    ingredients
}) => myFiltersIngredients.every(myfilter => ingredients.map(({
    ingredient
}) => ingredient).includes(myfilter)));

console.log( mySelectedDishes );

Answer 2

const myFiltersIngredients = ['rice', 'chicken'];

const myDishes = [{
        name: 'grandma's pie',
        ingredients: [{
                ingredient: 'rice',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            },
            {
                ingredient: 'chicken',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            }
        ]
    },
    {
        name: 'cookie',
        ingredients: [{
                ingredient: 'rice',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            },
            {
                ingredient: 'butter',
                ingredientUnit: 'grams',
                ingredientQuantity: 500
            }
        ]
    }
];

const mySelectedDishes = myDishes.filter(({
    ingredients
}) => myFiltersIngredients.every(myfilter => ingredients.map(({
    ingredient
}) => ingredient).includes(myfilter)));

console.log( mySelectedDishes );

Answer 3

Answer №2

Hopefully, this demonstration serves as a helpful guide in the right direction.

For further information, you can refer to the documentation of .filter and .every array methods.

To elaborate briefly:

The .filter method accepts a function as an argument and processes each object in the array based on the function's criteria, returning only those items that meet the specified conditions.

On the other hand, the .every method evaluates whether all elements in the array satisfy a specific condition passed through a function.

In my provided code snippet, I begin by filtering recipes based on ingredients and storing the filtered result in a variable. The function used for filtering checks if all ingredients associated with each recipe are present in the myFiltersIngredients array.

const myFiltersIngredients = ['flour', 'chicken'];

const myRecipes = [
  {
    name: 'Grandma\'s pie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      },
      {
        ingredient: 'chicken',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      }
    ]
  },
  {
    name: 'Cookie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      },
      {
        ingredient: 'butter',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      }
    ]
  }
];

const filteredRecipes = myRecipes.filter(o => {
  return o.ingredients.every(
    ({ingredient}) => myFiltersIngredients.includes(ingredient)
  );
});

console.log(filteredRecipes);

Answer 4

Hopefully, this demonstration serves as a helpful guide in the right direction.

For further information, you can refer to the documentation of .filter and .every array methods.

To elaborate briefly:

The .filter method accepts a function as an argument and processes each object in the array based on the function's criteria, returning only those items that meet the specified conditions.

On the other hand, the .every method evaluates whether all elements in the array satisfy a specific condition passed through a function.

In my provided code snippet, I begin by filtering recipes based on ingredients and storing the filtered result in a variable. The function used for filtering checks if all ingredients associated with each recipe are present in the myFiltersIngredients array.

const myFiltersIngredients = ['flour', 'chicken'];

const myRecipes = [
  {
    name: 'Grandma\'s pie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      },
      {
        ingredient: 'chicken',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      }
    ]
  },
  {
    name: 'Cookie',
    ingredients: [
      {
        ingredient: 'flour',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      },
      {
        ingredient: 'butter',
        ingredientUnit: 'gram(s)',
        ingredientQuantity: 500
      }
    ]
  }
];

const filteredRecipes = myRecipes.filter(o => {
  return o.ingredients.every(
    ({ingredient}) => myFiltersIngredients.includes(ingredient)
  );
});

console.log(filteredRecipes);

Searching for an array of objects containing nested arrays in JavaScript

Answer №1

Answer №2

Similar questions

Conceal the Vue router on a webpage

Can you explain the process of retrieving API information from a component directory with Next.js?

Create new instances of Backbone Models using an existing Backbone Model as a template

Initialization of Angular provider $get is missing

Newbie in Distress: Help Required Due to Server Error

Associate information with HTML elements

Choose Selectize.js to auto-populate inputs

How does Code Sandbox, an online in-browser code editor, manage file storage within the browser?

Creating a JSON-based verification system for a login page

display the designated image as a priority

Experiencing unexpected output from Angular model class method

Is there a discrepancy in the JSON algorithm?

Access the input field value with PHP and store it in a variable

Using Rails AJAX to dynamically load partials without the need to submit

The Jade template is not rendering the page correctly as anticipated

Strategies for extracting special character codes from API data within a React functional component

Mirror the input text to another input within a for loop

Being able to automatically update my JSON file without needing to manually refresh the webpage is a feature I am interested in exploring

How to use the importrange function to calculate the frequency of a specific value in a column

The process of transforming a string in JSON format into a JSONArray