Fill an array with four distinct, random objects without any duplicates using ES6+ and apply specific filters

Question

Fill an array with four distinct, random objects without any duplicates using ES6+ and apply specific filters

I could use some assistance enhancing a function that populates an array with 4 random, non-repeating recipe objects based on their IDs. However, I now need to incorporate an additional requirement where the recipes must include one breakfast, one lunch, one snack, and one dinner item. For instance:

Here is an example of JSON containing recipes:

[
  {
    recipeId: 1,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 2,
    recipeTypeId: 2, // Lunch
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 3,
    recipeTypeId: 3, // Snack
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 4,
    recipeTypeId: 4, // Dinner
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 5,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  }
]

This is my current function:

randomRecipes() {
  // Retrieve previously saved recipes from API
  localStorage.getItem('recipesList');
  // Random number generator
  const randomIndex = new Set();
  const recommendedRandomRecipes: [] = [];
  while (randomIndex.size < 4) {
    randomIndex.add(Math.floor(Math.random() * recipes.length));
  }
  randomIndex.forEach(i => recommendedRandomRecipes.push(recipes[Number(i)]));
  localStorage.addItem('recommendedRecipes', recommendedRandomRecipes);
  this.recipes = recommendedRandomRecipes;
}

The desired outcome:

recommendedRandomRecipes [1,2,3,4] or [2,3,4,5]

What I want to avoid:

RecommendedRandomRecipes [1,2,3,5] // Multiple breakfast items in the array

angular typescript ecmascript-6

Answer 1

Answer №1

One method to achieve this task is by creating a list of recipes that feature only one randomly selected recipe per recipeTypeId. Below are the steps to follow in order to accomplish this:

Start by iterating through the array to gather all distinct values for recipeTypeId. Utilize new Set() for this purpose.
Next, loop through these unique recipe types. For each type, filter the original recipes list to create an array consisting of recipes belonging to that specific type. Then, select a random item from this filtered array by referring to this guide on how to pick a random item.
Gather all these chosen items and provide only their respective recipeId.
If needed, arrange them in ascending order according to your output preference.

Check out the proof-of-concept below:

const recipesList = [
  {
    recipeId: 1,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 2,
    recipeTypeId: 2, // Lunch
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 3,
    recipeTypeId: 3, // Snack
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 4,
    recipeTypeId: 4, // Dinner
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 5,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  }
];

// Obtain unique recipeTypeId
const recipeTypes = new Set();
recipesList.forEach((recipe) => recipeTypes.add(recipe.recipeTypeId));

// Iterate over unique recipe types and choose a random recipe
const recipeCombos = Array.from(recipeTypes).map((type) => {
  const filteredRecipesByType = recipesList.filter((recipe) => {
    return recipe.recipeTypeId === type;
  });
  
  // Select a random recipe from this filtered collection
  const randomRecipeByType = filteredRecipesByType[Math.floor(Math.random() * filteredRecipesByType.length)];
  
  // Return only the recipeId since that's the desired property
  return randomRecipeByType.recipeId;
});

// The possible combinations for your provided data are:
// [1,2,3,4]
// [2,3,4,5]
console.log(recipeCombos.sort());

Answer 2

One method to achieve this task is by creating a list of recipes that feature only one randomly selected recipe per recipeTypeId. Below are the steps to follow in order to accomplish this:

Start by iterating through the array to gather all distinct values for recipeTypeId. Utilize new Set() for this purpose.
Next, loop through these unique recipe types. For each type, filter the original recipes list to create an array consisting of recipes belonging to that specific type. Then, select a random item from this filtered array by referring to this guide on how to pick a random item.
Gather all these chosen items and provide only their respective recipeId.
If needed, arrange them in ascending order according to your output preference.

Check out the proof-of-concept below:

const recipesList = [
  {
    recipeId: 1,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 2,
    recipeTypeId: 2, // Lunch
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 3,
    recipeTypeId: 3, // Snack
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 4,
    recipeTypeId: 4, // Dinner
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 5,
    recipeTypeId: 1, // Breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  }
];

// Obtain unique recipeTypeId
const recipeTypes = new Set();
recipesList.forEach((recipe) => recipeTypes.add(recipe.recipeTypeId));

// Iterate over unique recipe types and choose a random recipe
const recipeCombos = Array.from(recipeTypes).map((type) => {
  const filteredRecipesByType = recipesList.filter((recipe) => {
    return recipe.recipeTypeId === type;
  });
  
  // Select a random recipe from this filtered collection
  const randomRecipeByType = filteredRecipesByType[Math.floor(Math.random() * filteredRecipesByType.length)];
  
  // Return only the recipeId since that's the desired property
  return randomRecipeByType.recipeId;
});

// The possible combinations for your provided data are:
// [1,2,3,4]
// [2,3,4,5]
console.log(recipeCombos.sort());

Answer 3

Answer №2

Check out the code snippet below for detailed explanations:

var recipes = [
  {
    recipeId: 1,
    recipeTypeId: 1, // breakFast
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 2,
    recipeTypeId: 2, // lunch
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 3,
    recipeTypeId: 3, // snack
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 4,
    recipeTypeId: 4, // dinner
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 5,
    recipeTypeId: 1, // breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  }
]

function randomRecipes(recipes) {
  // 1. Counting the different recipeTypeIds present in the recipes array
  var recipeTypeIdsLegth = recipes.reduce((acc, item) => acc.indexOf(item.recipeTypeId) == -1 ? [...acc, item.recipeTypeId] : acc, []).length;
  console.log(recipeTypeIdsLegth) // 4

  // 2. Cloning the original array to modify it
  let clonedRecipes = [...recipes]

  // 3. Initializing an empty result array
  var recommendedRandomRecipes = []

  // 4. Iterating over the unique recipeTypeIds
  for (i = 0; i < recipeTypeIdsLegth; i++) {
    
    // 5. Generating a random index
    var randomIndex = Math.floor(Math.random() * clonedRecipes.length);

    // 6. Adding the randomly chosen recipe to the result array
    recommendedRandomRecipes.push(clonedRecipes[randomIndex]);

    // 7. Filtering out recipes with the same recipeTypeId as the selected one
    clonedRecipes = clonedRecipes.filter(item => item.recipeTypeId !== clonedRecipes[randomIndex].recipeTypeId)
  }

  // 8. Returning the recommended random recipes
  return recommendedRandomRecipes;
}

var recommendedRandomRecipes = randomRecipes(recipes);

console.log(recommendedRandomRecipes);

Answer 4

Check out the code snippet below for detailed explanations:

var recipes = [
  {
    recipeId: 1,
    recipeTypeId: 1, // breakFast
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 2,
    recipeTypeId: 2, // lunch
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 3,
    recipeTypeId: 3, // snack
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 4,
    recipeTypeId: 4, // dinner
    "description": "someRecipe",
    "img": "someImgBase64",
  },
  {
    recipeId: 5,
    recipeTypeId: 1, // breakfast
    "description": "someRecipe",
    "img": "someImgBase64",
  }
]

function randomRecipes(recipes) {
  // 1. Counting the different recipeTypeIds present in the recipes array
  var recipeTypeIdsLegth = recipes.reduce((acc, item) => acc.indexOf(item.recipeTypeId) == -1 ? [...acc, item.recipeTypeId] : acc, []).length;
  console.log(recipeTypeIdsLegth) // 4

  // 2. Cloning the original array to modify it
  let clonedRecipes = [...recipes]

  // 3. Initializing an empty result array
  var recommendedRandomRecipes = []

  // 4. Iterating over the unique recipeTypeIds
  for (i = 0; i < recipeTypeIdsLegth; i++) {
    
    // 5. Generating a random index
    var randomIndex = Math.floor(Math.random() * clonedRecipes.length);

    // 6. Adding the randomly chosen recipe to the result array
    recommendedRandomRecipes.push(clonedRecipes[randomIndex]);

    // 7. Filtering out recipes with the same recipeTypeId as the selected one
    clonedRecipes = clonedRecipes.filter(item => item.recipeTypeId !== clonedRecipes[randomIndex].recipeTypeId)
  }

  // 8. Returning the recommended random recipes
  return recommendedRandomRecipes;
}

var recommendedRandomRecipes = randomRecipes(recipes);

console.log(recommendedRandomRecipes);

Fill an array with four distinct, random objects without any duplicates using ES6+ and apply specific filters

Answer №1

Answer №2

Similar questions

Setting a maximum value for a text box input in Angular for enhanced bot functionality

Sort booleans in reverse order in TypeScript in descending order

Angular repeatedly displays user information

Challenges with implementing Typescript in Next.js and the getStaticProps function

The issue of data being duplicated when clicking on react-cookie-consent

The upload function does not allow re-uploading of a file that has been previously deleted

Passing an observable from parameters to a pipe in RxJS: A guide

Turn off basic authentication for serving static content with Spring Security

Upgrading from Angular 4 to 9

Adjusting the height of Google maps in Angular 4 to occupy the rest of the

Combining and forming a distinctive case-sensitive array in JavaScript

Problem with resizing the calendar dialog in PrimeNG's p-calendar component

React: Unable to locate module: Unable to resolve

TypeORM's OneToMany relationship creates a corresponding column in the database

What location is the optimal choice for documenting logs at a debugging level?

Executing ngOnChanges in Angular 2

Guide for integrating a locally cloned open source angular component into your Angular project

Is there a method for the parent to detect changes in its output when passing around complex objects to its child?

Building Interactive Graphs with Chart.JS in Angular Using Observables

Unable to locate the type definition file for 'jquery'