need to grab from 2 arrays in javascript

Question

My arrays:

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"];

var asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"];

var americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];

Know this is a possibility to grab randomly from array:

var randomIndex = Math.floor(Math.random() * mexicanFood.length);

I want to pull a value from each food category. I don't want all of mexicanFood values to be the result for food options. I want it at random but at least to pull one or two from each category. How can you do that with having it go into radio buttons (maybe 5 radio buttons) and can it be done with Math.random?

Also want it to be in javascript and html if possible

Edit:

I basically want different food categories in arrays. Then have random values pulled from the categories and those values will be put into radio buttons. My overall project that I want to create is a voting poll for restaurants to eat at. So I don't want 5 burger places to come up when I have mexican, asian, american, and other options to randomly pull from.

What I am stuck on is how to randomly pull from each array. I know how to randomly pull from one array list. But when I have mexicanFood, asianFood and americanFood (or even more than those), I am not sure how to randomly pull values from those and have those values populate radio buttons

Where are you stuck? You know how to create a random index, so if you want 2 random items, generate two random indexes and get their values from the arrays. — Shilly
– Shilly, Commented Apr 27, 2017 at 14:20
I want it at random but at least to pull one or two from each category. Well, now you are straying from what random does. — Scott Marcus
– Scott Marcus, Commented Apr 27, 2017 at 14:20
I'd suggest combining your arrays and creating objects of the structure { name: 'Taco Bell', type: 'mexican' }. Using the single array makes your life easier and you can still distinguish which foods are of which type. — Adam Nierzad
– Adam Nierzad, Commented Apr 27, 2017 at 14:25
@ScottMarcus I want to have different categories that are in the arrays. Then randomly pull from each array. I know how to randomly pull from 1 array but not multiple. — Okami
– Okami, Commented Apr 27, 2017 at 18:56

Toby Mellor · Accepted Answer · 2017-04-27 18:56:34Z

1

I'm assuming you want to return an array of random foods, containing at least 1 from each category.

I've created a function called createRandomArray(), which accepts an arraySize. This arraySize refers to the amount of items you wish to have in your final array.

In the function, I'm concatenating all of the food arrays together. I'm then looping through this array to add a random index to a new array.

var mexicanFood = ["Taco Bell", "Beans", "Taco Time", "Buritos", "Chalupa"],
    asianFood = ["Noodles", "Rice", "Sushi", "Fish", "Chicken"],
    americanFood = ["Hot dogs", "Pizza", "Burgers", "Nachos", "Other"];
    
function createRandomArray(arraySize) {
    var allFoods = mexicanFood.concat(asianFood).concat(americanFood),
        randomFoods = [];
    
    if (arraySize <= allFoods.length) {
        randomFoods = [
            mexicanFood[getRandomArrayIndex(mexicanFood)],
            asianFood[getRandomArrayIndex(asianFood)],
            americanFood[getRandomArrayIndex(americanFood)]
        ]; // at at least one from each
        
        // remove the ones that were initially added from each
        allFoods.splice(allFoods.indexOf(randomFoods[0]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[1]), 1);
        allFoods.splice(allFoods.indexOf(randomFoods[2]), 1);
        
        for (var i = 0; i < arraySize - 3; i++) {
            var randomIndex = getRandomArrayIndex(allFoods);
            
            randomFoods.push(allFoods[randomIndex]);
            allFoods.splice(randomIndex, 1);
        }
        
        return randomFoods;
    }
    
    return allFoods; // requesting more items of food than the amount available, so just add them all
}

function getRandomArrayIndex(array) {
    return Math.floor(Math.random() * array.length);
}

var randomFoods = createRandomArray(5);

for (var i = 0; i < randomFoods.length; i++) {
    document.getElementById('food-form').innerHTML += '<input type="radio" name="food" value="' + randomFoods[i] + '"> ' + randomFoods[i] + '<br>';
}

<form action="" id="food-form"></form>

edited Apr 27, 2017 at 18:56

answered Apr 27, 2017 at 14:25

Toby Mellor

8,2078 gold badges38 silver badges58 bronze badges

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

9 Comments

Freeman Lambda Over a year ago

Not really clear from the question, but I think there are two constraints: at least one from each, no more than two from each. So only 2:2:1, 2:1:2 and 1:2:2 should work.

Toby Mellor Over a year ago

@Okami Is this the case?

Ethilium Over a year ago

@TobyMellor He also asked that they be put into html radio buttons.

Okami Over a year ago

@TobyMellor I am trying to figure out how to explain it. I basically want different food categories in arrays. Then have random values pulled from the categories and those values will be put into radio buttons. My overall project that I want to create is a voting poll for restaurants to eat at. So I don't want 5 burger places to come up when I have mexican, asian, american, and other options to randomly pull from.

Toby Mellor Over a year ago

@Okami Multiple examples of the expected result in the edited question would be helpful

|

Collectives™ on Stack Overflow

need to grab from 2 arrays in javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related