Javascript two dimensional array iternation

Question

You have people coming over, and pizza is on the menu. The problem is, each person only likes certain toppings. And the more people come over, the more pizza you’ll need. To help you figure out how much pizza you should order, and what toppings to get, you are going to create a JavaScript program.

Your HTML page should list the following people, how many slices they eat, and their topping preferences.

//Pizza preferences that are hard coded in

The program should ask who is coming over. After all of the guests have been typed in, the program will announce how many slices of pizza you’ll need, and what toppings you can choose from for this particular group of people. This information should be accurate no matter which of the people are added to the guest list. If the people that are coming over can’t agree on any toppings, the program should point out that you need to just get plain pizza.

//Dinner plans assignment

       var nameSliceTop = [];
       var totalSlice = 0;
       var aceptableTopping = ["pepperoni", "bacon", "ham", "pineapple", "onion", "peppers", "extra cheese", "sausage", "olives"
         , "mushroom", "plain"]
       
      nameSliceTop[0] = ["jane", 2, "mushroom", "onion", "peppers", "olives"];
      nameSliceTop[1] = ["lisa", 3, "pepperoni", "ham", "pineapple"];
      nameSliceTop[2] = ["taylor", 3, "extra cheese", "pepperoni", "sausage", "bacon"];
      nameSliceTop[3] = ["chris", 2, "mushroom", "sausage", "bacon", "ham", "onion", "peppers"];
      nameSliceTop[4] = ["alyssa", 1, "pepperoni", "bacon"];
      nameSliceTop[5] = ["will", 2, "extra cheese", "sausage", "bacon", "onion", "peppers", "olives"];
      nameSliceTop[6] = ["jessica", 2, "pepperoni", "bacon", "ham", "pineapple", "onion", "peppers"];
      
      function outputPizza() {
        for (i = 0; i < 7; i++) {
          if (document.getElementById(nameSliceTop[i][0]).checked === true) {
            totalSlice += nameSliceTop[i][1];
          }  
        }  
        document.getElementById("dinnerPlansTwo").innerHTML += "You will need " + totalSlice + " slices for your guests." + "<br/>";
        totalSlice = 0;
          
        for (i = 0; i < 7; i++) {
          if (document.getElementById(nameSliceTop[i][0]).checked === true) {
          
            for(x = 2; x < nameSliceTop.length; x++) {
            
              for (y = 0; y < aceptableTopping.length; y++) {
                if (aceptableTopping[y].indexOf(nameSliceTop[i][x]) == -1) { 
                  aceptableToping.splice(y, 1);
                }  
              }      
            }        
          }
        } 
      
        document.getElementById("dinnerPlansTwo").innerHTML += "Your agreeable options include:";
      
        for (z = 0; z < aceptableTopping.length; z++) {
          document.getElementById("dinnerPlansTwo").innerHTML += " " + aceptableTopping[z] + " ";
        }
        
      }  

<!-- Dinner Plans assighment -->
      <p id="dinnerPlans"> Dinnner Plans Assighment: </p>
      
      <table>
        <thead>
          <tr>
            <th>Check if attending</th>
            <th>Name</th>
            <th>Slices</th>
            <th>Aceptable Toppings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" id="jane"></td>
            <td>Jane</td>
            <td>2</td>
            <td>mushroom, onion, peppers, olives</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="lisa"></td>
            <td>Lisa</td>
            <td>3</td>
            <td>pepperoni, ham, pineapple</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="taylor"></td>
            <td>Taylor</td>
            <td>3</td>
            <td>extra cheese, pepperoni, sausage, bacon</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="chris"></td>
            <td>Chris</td>
            <td>2</td>
            <td>mushroom, sausage, bacon, ham, onion, peppers</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="alyssa"></td>
            <td>Alyssa</td>
            <td>1</td>
            <td>pepperoni, bacon</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="will"></td>
            <td>Will</td>
            <td>2</td>
            <td>extra cheese, sausage, bacon, onion, peppers, olives</td>
          </tr>
          <tr>
            <td><input type="checkbox" id="jessica"></td>
            <td>Jessica</td>
            <td>2</td>
            <td>pepperoni, bacon, ham, pineapple, onion, peppers</td>
          </tr>
        </tbody>
      </table>
      
      <button onclick="outputPizza()">Submit selected textboxes</button>
      
      <p id="dinnerPlansTwo"><br/></p>

Answer 1

A better approach might be to define possible party attendees as Objects, not arrays:

var people = [{
  name: "jane",
  slices: 2,
  toppings: ["mushroom", "onion", "peppers", "olives"]
}, {
  ...
}];

Then, as you iterate over your selected people, you can add slices. After you iterate over everyone, you'd have to deduplicate the array, but this is a cleaner approach and only needs to be done once per button click.

Additionally, you only need to iterate over your people array once: with each iteration, if the person is selected, add the slices to a totalSlices variable and the person's topping preferences to the acceptableToppings array variable.

If "acceptable toppings" means everyone prefers the topping, not just anyone, then I'd go with a nested for loop like you have above:

// Loop through all possible toppings
for (i = 0; i < aceptableTopping.length; i++) {
  // Loop through all people
  for (j = 0; j < people.length; j++) {
    // If any person's topping preferences do NOT include the topping in question, "pop" (remove) it
    if (people[j]["toppings"].indexOf(aceptableTopping[i]) < 0) {
      aceptableTopping.pop(aceptableTopping[i]);
      continue;
    }
  }
}

Good luck!

Answer 2

You had several issues in your code. Let me list them out, but before I do,

Here's a link to my fiddle: jsfiddle.net/6f0ctoco

Issues with your original code:

1. In jsfiddle, I was getting "outputPizza is not defined error". This might not be the case for you, but I had to overcome it by setting the function to the global window object, window.outputPizza = function outputPizza() { //...

2. You had a typo for acceptableTopping in the last for loop. The spelling didn't match the rest of the script.

3. You were using acceptableTopping.splice(). Splice will remove items from the acceptableTopping array. Instead, you want to store your acceptable toppings in a new array. I stored them in currentAcceptableToppings instead.

4. Because you were not properly tracking or checking for the acceptable toppings, there was some significant changes made in the outputPizza function

   • I track the checked person's preferences in an array called preferences
   • for each preference in the array, I check each topping to see if they are acceptable by running a filter over preferences, then comparing the lengths of filterPreferences & preferences

5. I use document.getElementById("dinnerPlansTwo").innerHTML only once to simplify the output printing

Tip: I used Array.forEach, because the syntax is just nicer to read than having too many for loops.