Combine Arrays from different variables to populate randomly javascript

Question

I am trying to recreate a "Today's Special" menu so that every time the page is refreshed, a different type of pizza will populate, but with the correct properties within the arrays. So the 0 indexed data all belong together, and the 1 indexed belong together, etc. Here is my code that I tried, but it populates randomly from any random variable. Please help.

I want it to look like: "Today's Special: pizzaName + price + description"

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM','Conjunction Function'];

var price = [44.44, 22.14, 16.99, 17.02];

var description = ['Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'];

HTML:

<section id="today">
  <div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <p id="special">Conditional Love</p>
  </div>
</section>

JavaScript:

function randomPizzaFunction(hungry, hungrier, hungriest){
  for(var i = 0; i<hungry.length; i++){
    var displayTodaysSpecial = hungry.concat(hungrier).concat(hungriest);
    console.log(displayTodaysSpecial[i]);
  }
  return displayTodaysSpecial;
}

randomPizzaFunction(pizzaName, price, description);
var genRandomPizza = randomPizzaFunction(pizzaName, price, description);
console.log(genRandomPizza);

var changeSpecial = document.getElementById("special");
changeSpecial.innerHTML = genRandomPizza[Math.floor(Math.random() * genRandomPizza.length)];

You should not store attributes in separate arrays. Instead make one array of objects, where each object has all the properties of a particular pizza. — trincot
– trincot, Commented Mar 26, 2017 at 8:36
You just want to pick randomly from these three arrays and show them as a 1 single today's special menu every time. right? — Suhaib Janjua
– Suhaib Janjua, Commented Mar 26, 2017 at 8:43

trincot · Accepted Answer · 2017-03-26 08:48:28Z

You should store your pizza properties together in one object per pizza, not spread over different arrays. Things become much easier when you use a different structure:

var pizzas = [{
    name: 'Four Loop',
    price: 44.44,
    description:'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 
},{
    name: 'Conditional Love', 
    price: 22.14,
    description: 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 
},{
    name: 'The DOM',
    price: 16.99,
    description: 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!',
},{
    name: 'Conjunction Function',
    price: 17.02,
    description: 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'
}];

function randomPizza(pizzas){
    return pizzas[Math.floor(Math.random() * pizzas.length)];
}

var pizza = randomPizza(pizzas);
document.getElementById("special-name").textContent = pizza.name;
document.getElementById("special-price").textContent = pizza.price;
document.getElementById("special-description").textContent = pizza.description;

<section id="today">
  <div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <div id="special">
        Special: <span id="special-name"></span><br>
        Price: $<span id="special-price"></span><br>
        <span id="special-description"></span>
    </div>
  </div>
</section>

Nina Scholz · Accepted Answer · 2017-03-26 08:58:45Z

You could build an array with objects

[
    {
        name: "Four Loop",
        price: 44.44,
        description: "Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!"
    },
    {
        name: "Conditional Love",
        price: 22.14,
        description: "This island favorite doesn't give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!"
    },
    {
        name: "The DOM",
        price: 16.99,
        description: "This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!"
    },
    {
        name: "Conjunction Function",
        price: 17.02,
        description: "Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!"
    }
]

and take it for random choice.

Then make an output with the properties of the chosen pizza.

function getRandomPizza(pizza) {
    return pizza[Math.floor(Math.random() * pizza.length)];
}

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM', 'Conjunction Function'],
    price = [44.44, 22.14, 16.99, 17.02],
    description = ['Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'],
    pizza = pizzaName.map(function (a, i) {
        return  { name: a, price: price[i], description: description[i] };
    }),
    randomPizza = getRandomPizza(pizza);


['name', 'price', 'description'].forEach(function (k) {
    document.getElementById(k).innerHTML = randomPizza[k];
});

<div class="content">
    <h3 class="sectionTitle">Today's Special</h3>
    <h4 id="name"></h4>
    <h4><span id="price"></span> $</h4>
    <p id="description"></p>
</div>

Ahmed Eid · Accepted Answer · 2017-03-26 08:43:19Z

In html I took the libertiy and added element for 'name , price and description' along with id

<section id="today">
<div class="content">
  <h3 class="sectionTitle">Today's Special</h3>
  <h1 id='name'>pizza name</h1>
  <h2 id='price'>price</h2>
  <p id='dec'>description</p>
</div>

you just need to get a random number and then access each array and populate every element respectively

var pizzaName = ['Four Loop', 'Conditional Love', 'The DOM','Conjunction Function'];

var price = [44.44, 22.14, 16.99, 17.02];

var description = [
  'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!', 
  'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!', 
  'This dynamic blend of Duck, Olives and Mango will change your original thought of what a pizza should be. The only thing constant is change for this bad boy!', 
  'Create your own pie by passing in handpicked fresh ingredients. Invoke your appetite and creativity! Mamma Mia return back to glory!'
];

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

var rn = getRandomInt(0,3)

document.getElementById('name').innerHTML = pizzaName[rn]
document.getElementById('price').innerHTML = price[rn]
document.getElementById('desc').innerHTML = description[rn]

I'm assuming that you have your script tag at the end of the page .. if not wrap the code in a document.ready method .

Luis Estevez · Accepted Answer · 2017-03-26 08:43:42Z

0

@trincot is correct, you should store it in array of objects. Like this

var pizza = [{
    name: 'Four Loop',
    price: 44.44,
    description: 'Spin your wheel with this quattro cheese mix doused in garlic and truffle oil. Loop there it is!'
}, {
    name: 'Conditional Love',
    price: 22.14,
    description: 'This island favorite doesn\'t give you a chance to say no. Korean bulgogi meat, kim chee, mozzarella cheese and onions always returns true! Boo~Ya!'
}];

var display = pizza[Math.floor(Math.random() * pizza.length)];

answered Mar 26, 2017 at 8:43

Luis Estevez

1,41713 silver badges19 bronze badges

Collectives™ on Stack Overflow

Combine Arrays from different variables to populate randomly javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related