How do I repeat an iteration if a condition is true in JavaScript?

user_13041499 0
Viewed 536

I am trying to display up to three recipes from an API that specifically include bacon as an ingredient. The API only has 10 recipes that meet this criteria, so I am running into an issue where the same recipes are sometimes being repeated on the page if the user wishes to view two or three recipes. How can I set a condition to check if the random number that I am generating and storing in an array is a duplicate value? If a duplicate, then I want for the iterator to be subtracted by 1 and the for loop to continue. I've listed the code I've I appreciate any feedback that is provided!

// The number of recipes the user would like to display//
var recipeNumber = $("#recipe-input").val();
var parsedInput = parseInt(recipeNumber);

// creating an empty array that will story the random numbers that are generated//
var ranNumArr = [];
console.log(ranNumArr);

for (i = 0; i < parsedInput; i++) {
  // generate a random number based on the length of the recipe API's array of bacon recipes (10) and push it into the ranNumArr// 
  var randomNumber = Math.floor(Math.random() * 10);
  ranNumArr.push(randomNumber);

  // If the value of the index in the array is equal to a previous index's value, repeat the iteration//
  if (ranNumArr[i] === ranNumArr[i -1] || ranNumArr[i] === ranNumArr[i -2]){
      console.log("this is a duplicate number")
      i = i - 1
    }
  // else, display the recipe on the card//
  else  {
      randomRecipe = ranNumArr[i]
 // Create cards that will house the recipes//
      var recipeCell = $("<div>").attr("class", "cell");
      $("#recipes-here").append(recipeCell);
      var recipeCard = $("<div>").attr("class", "card");
      recipeCell.append(recipeCard);
      var recipeSection = $("<div>").attr("class", "card-section");
      recipeCard.append(recipeSection);  
      var cardTitleE1 = $("<h1>"); 
      cardTitleE1.attr("id", "recipe-title"); 
      var cardImageE1 = $("<img>"); 
      cardImageE1.attr("id", "recipe-image"); 
      var cardTextE1 = $("<a>"); 
      cardTextE1.attr("id", "recipe-link");

      // Adding the recipe title, url, and image from the API call//
      cardTitleE1.text(response.hits[randomRecipe].recipe.label);
      cardTextE1.text("Click here for link to recipe");
      cardTextE1.attr("href", response.hits[randomRecipe].recipe.url);
      cardTextE1.attr("target", "_blank");
      cardImageE1.attr("src", response.hits[randomRecipe].recipe.image);

      // Display the recipe on the DOM//
      recipeSection.append(cardTitleE1); 
      recipeSection.append(cardImageE1);
      recipeSection.append(cardTextE1); 
    }
  }
conditional-statements arrays jquery javascript
1 Answers

You can use a Set to store numbers that have already been chosen.

const set = new Set;
//....
if (set.has(randomNumber)){
   console.log("this is a duplicate number");
   i--;
} else {
   set.add(randomNumber);
//...

Alternatively, as Barmar suggested, you can shuffle the array of integers from 0 to 9 beforehand and then loop over the values for better efficiency. Below I have provided an example using the Fisher-Yates shuffle.

const arr = [...Array(10).keys()];
for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.random() * (i + 1) | 0;
    const temp = array[i];
    array[i] = array[j];
    array[j] = temp;
}
for(const num of arr){
   //do something with num...
}
user_95131840
Related