0

I've written some JavaScript function (selectMeal) to loop 7 times randomly selecting 1 item from an array (tempMealList) then push the item to another Array (dinnersPicked). Once the items been added to the new array (dinnersPicked) it's then removed from the original array (tempMealList) to avoid it from being selected again.

In the console, each run of this function (selectMeal) yields no issue, but when I trigger the function on a button click in HTML, each time the buttons clicked the array being used seems to be permanently altered, with the items randomly selected on the first run of the function not being considered on the second click and similarly for any successive click, any item previously shown is not considered.

I've tried to resolve this in the function by redefining the variables at the start of the function to reset the array being considered on each click but this doesn't seem to work.

What am I doing wrong and how can I make sure that with every click the original array is considered?

Here is the code:

    //Meal objects
let a = {Food:'Chicken and leek', Link: 'null', Difficulty: 'Easy'};
let b = {Food:'Spaghetti Bolognese', Link: 'null', Difficulty: 'Medium'};
let c = {Food:'Lasagna', Link: 'null', Difficulty: 'Medium'};
let d = {Food:'Roast lamb', Link: 'null', Difficulty: 'Hard'};
let e = {Food:'Roast chicken', Link: 'null', Difficulty: 'Hard'};
let f = {Food:'Fajitas', Link: 'null', Difficulty: 'Easy'};
let g = {Food:'Tortilla pizza', Link: 'null', Difficulty: 'Easy'};
let h = {Food:'Spaghetti Carbonara', Link: 'null', Difficulty: 'Easy'};
let i = {Food:'Chicken salad', Link: 'null', Difficulty: 'Easy'};
let j = {Food:'Pies and mash', Link: 'null', Difficulty: 'Easy'};
let k = {Food:'BBQ', Link: 'null', Difficulty: 'Medium'};
let l = {Food:'Lamb chops and potatoes', Link: 'null', Difficulty: 'Medium'};
let m = {Food:'Takeaway', Link: 'null', Difficulty: 'Easy'};
let n = {Food:'Beans on toast', Link: 'null', Difficulty: 'Easy'};
let o = {Food:'Sausage and mash', Link: 'null', Difficulty: 'Easy'};
let p = {Food:'Stir fry', Link: 'null', Difficulty: 'Medium'};
let q = {Food:'Seasoned Chicken and rice', Link: 'null', Difficulty: 'Easy'};
let r = {Food:'Shepards Pie', Link: 'null', Difficulty: 'Hard'};
let s = {Food:'Beef nachos', Link: 'null', Difficulty: 'Medium'};
let t = {Food:'Burgers', Link: 'null', Difficulty: 'Easy'};
let u = {Food:'Jacket potato', Link: 'null', Difficulty: 'Easy'};
let v = {Food:'Chicken curry', Link: 'null', Difficulty: 'Medium'};
let w = {Food:'Chicken enchiladas', Link: 'null', Difficulty: 'Medium'};
let x = {Food:'Pasta bake', Link: 'null', Difficulty: 'Medium'};
let y = {Food:'Chicken bake', Link: 'null', Difficulty: 'Hard'};
let z = {Food:'Chilli Con Carne', Link: 'null', Difficulty: 'Easy'};

//Array for meals 
const mealList = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];


//Array to store the dinners chosen
let dinnersPicked = [];

//Function for selecting the meals
const selectMeal = () => {

dinnersPicked = [];
let tempMealList = mealList;

for (i=0; i<7; i++) {
  randomMeal = tempMealList[Math.floor(Math.random() * tempMealList.length)];
  dinnersPicked.push(randomMeal);
  const index = tempMealList.indexOf(randomMeal);
  tempMealList.splice(index,1)
};

showMeals(dinnersPicked);
};

const showMeals = (dinnersPicked) => {
//Monday
  document.getElementById('monFood').innerHTML = dinnersPicked[0].Food;
  document.getElementById('monFood').setAttribute('href', dinnersPicked[0].Link);
  document.getElementById('monDifficulty').innerHTML = dinnersPicked[0].Difficulty;
//Tuesday
  document.getElementById('tueFood').innerHTML = dinnersPicked[1].Food;
  document.getElementById('tueFood').setAttribute('href', dinnersPicked[1].Link);
  document.getElementById('tueDifficulty').innerHTML = dinnersPicked[1].Difficulty;
//Wednesday
  document.getElementById('wedFood').innerHTML = dinnersPicked[2].Food;
  document.getElementById('wedFood').setAttribute('href', dinnersPicked[2].Link);
  document.getElementById('wedDifficulty').innerHTML = dinnersPicked[2].Difficulty;
//Thursday
  document.getElementById('thuFood').innerHTML = dinnersPicked[3].Food;
  document.getElementById('thuFood').setAttribute('href', dinnersPicked[3].Link);
  document.getElementById('thuDifficulty').innerHTML = dinnersPicked[3].Difficulty;
//Friday
  document.getElementById('friFood').innerHTML = dinnersPicked[4].Food;
  document.getElementById('friFood').setAttribute('href', dinnersPicked[4].Link);
  document.getElementById('friDifficulty').innerHTML = dinnersPicked[4].Difficulty;
//Saturday
  document.getElementById('satFood').innerHTML = dinnersPicked[5].Food;
  document.getElementById('satFood').setAttribute('href', dinnersPicked[5].Link);
  document.getElementById('satDifficulty').innerHTML = dinnersPicked[5].Difficulty;
//Sunday
  document.getElementById('sunFood').innerHTML = dinnersPicked[6].Food;
  document.getElementById('sunFood').setAttribute('href', dinnersPicked[6].Link);
  document.getElementById('sunDifficulty').innerHTML = dinnersPicked[6].Difficulty;
};

For reference (and I don't think this makes a difference...) this is how the function is triggered from the HTML:

<div class='button -dark center' onclick="selectMeal()">Click for random meals</div>
1
  • 1
    Create a copy of your original array, then perform stuff on the copy. Commented May 8, 2021 at 23:37

1 Answer 1

3

When you do let tempMealList = mealList; those two variables are now pointing to the same array. So when you do tempMealList.splice(index,1) you are also modifying mealList.

Try let tempMealList = [...mealList]; instead to make a copy.

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

3 Comments

... and put that let outside (before) the function.
Thanks @Bafsky, that's worked. I'd tried wrapping the mealList array in square brackets before but didn't use the 3 dots, I guess this is the difference between creating an array of arrays and an array of another array's items. @denis why would I put that let outside the function? It's a variable I only require within the function, the master array mealList is globally available. I'm new to coding so sorry if that seems a silly question.
Kieran, it's just a misunderstanding from my part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.