Select x random elements from an array (that contains nested arrays) and no more than one from each nested array

Question

I'm new to programming, but have learnt enough HTML & CSS to create my handmade blog onlyrss.org, and now I've tried my first JavaScript "app". The app does most of what I need it to do i.e. pick x random exercises from an array. But, some of the exercises are "alternatives" and I don't want more than one of them in the output e.g. ring pull-ups OR bar-pullups, OR chin-ups, 500m row OR 250m row etc.

My guess is I need nested arrays in my array that group together the alternatives, and then the code only ever picks 1 option from each nested array (guess it makes sense if every entry in the main array was a nested array, even if it only has a single value for now?). To be frank, this is well past my abilities at the moment, hence my request for help.

Here's the link to the code on Codepen, but the code is also shown below:

// get the slider value
    function getNumber(){
        let input = document.getElementById("userInput").value;
      return input
    }

//triggered by the main button: set the number of exercises to "n"
    function myFunction() {
    let n = getNumber() 

//clear the list of any existing exercises
    document.getElementById("todays_exercises").innerHTML = "";

//define the array
    let all_exercises = [ 
      " air squats ×40",
      " skip ×200",
      " burpees ×20",
      " row 500m",
      " pull-ups ×10",
      " finger board pull-ups ×10",
      " ring pull-ups ×10",
      " sit-ups ×40",
      " press-ups ×25",
      " lunges ×20",
      " curls ×15",
      " ring rows ×12",
      " assisted ring dips ×10",
      " ring push ups ×10",
      " power snatch ×10",
      " power clean ×20",
      " power clean & jerk ×15",
      " hanging leg raises ×20",
      " bench press ×10",
      " calf raises ×20",
      " plank 20s",
      " dips ×20",
      " row 250m"
    ];

//Set the max value of the slider (with id=userInput) to the # of elements in the array
    document.getElementById("userInput").setAttribute('max', all_exercises.length);

// shuffle the full array
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j],  array[i]];
        }
    }

// pull out the first n values from the shuffled array and display as ordered list
    shuffleArray(all_exercises);
    all_exercises.slice(0,n).forEach(e => {
        todays_exercises.innerHTML =  todays_exercises.innerHTML + '<li>' + e + '</li>' ;
    });
    }

Any help would be much appreciated.

Andreas Aanestad · Accepted Answer · 2022-06-25 21:18:25Z

1

Nested arrays would do the trick. You can use your shuffle function to shuffle the nested array as well.

// similar exercises are grouped
const all_exercises = [
    ["pull-ups","bar-pullup"],
    ["power-snatch","power-clean"],
]


all_exercises.slice(0,n).forEach(e => {
    shuffleArray(e); // shuffle the nested array
    // choose the first element using e[0]
    todays_exercises.innerHTML =  todays_exercises.innerHTML + '<li>' + e[0] 
     + '</li>' ;
});
}

Here is a working codepen.

answered Jun 25, 2022 at 21:18

Andreas Aanestad

284 bronze badges

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

2 Comments

Mark Evans Over a year ago

That works a treat, cheers! It's exactly what I needed, and only required tiny changes, thanks for your time!

Mark Evans Over a year ago

and here's the final result onlyrss.org/apps/circuits.html

Collectives™ on Stack Overflow

Select x random elements from an array (that contains nested arrays) and no more than one from each nested array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related