无法将菜单从 php json 文件输出到 html

Question

I was given a task which basically takes a json file and outputs the contents to a menu via javascript. I have some code drawn out but it is not working. The task needs to output the JSON file to html via api so that a customer can order. Also it has to save the order as a JSON string to localstorage(browser). And finally it needs to basically spit out their order with the button (onClick). So right now my problem is a. when I add the id of "order" to the container div element my page goes white. I dunno why that happens, but I would like to keep this format(design) if possible. Secondly, well there is no second since output whites out my page lol. But I need to get past this first hurdle first. I will share my code (html, js, and css). Any help or pointers would be appreciated!

//get menu from api
var getJSON = function(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('get', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status == 200) {
      callback(null, xhr.response);
    } else {
      callback(status);
    }
  };
  xhr.send();
};

/*
{
"menu": {
"slice of pizza": "2.00",
qty_slice of pizza
"toppings": {
  "pepperoni": ".25",
  "meatballs": ".35",
  "mushrooms": ".40",
  "olives": ".20"
},
"sides": {
  "potato salad": "1.25",
  "hummus": "2.50",
  "caesar salad": "3.50",
  "garden salad": "2.25"
},
"drinks": {
  "soda": {
    "small": "1.95",
    "medium": "2.20",
    "large": "2.50"
  },
  "juice": "2.00",
  "water": "1.25"
   }
   }
  }
 */

getJSON('https://mm214.com/menu.php', function(err, data) {
  if (err != null) {
    alert('Something went wrong: ' + err);
  } else {

    var content = '';

    for (x in data.menu) {
      if (typeof(data.menu[x]) == 'object') {
        for (y in data.menu[x]) {
          if (typeof(data.menu[x][y]) == 'object') {
            for (z in data.menu[x][y]) {
              content += z + ':' + data.menu[x][y][z] + '<input type="number" id = "qty_' + z + '"><br>';
            }
          } else {
            content += y + ':' + data.menu[x][y] + '<input type="number" id = "qty_' + y + '"><br>';
          }
        } //closes y in data

      } else {
        content += x + ':' + data.menu[x] + '<input type="number" id = "qty_' + x + '"><br>';

      } //else for data.menu[x] if not an object
    }
  } //closes outer for loop

  //localStorage only stores strings! Stringify turns objects into strings!
  //parse converts JSON strings to objects that can be looped around

  document.getElementById("menuOutput").innerHTML = content;
  localStorage.setItem('order', JSON.stringify(data));
  console.log(a + ':' + order[a]);

  var order = JSON.parse(localStorage.getItem('order'));
  console.log(typeof(order));
  for (a in order) {}

});


function storeOrder() {
  var pizzaqty = document.getElementById('qty_slice of pizza').value;
  localStorage.setItem('pizza', pizzaqty);
  var price = pizzaqty * 2;
}


function retrieveOrder() {
  var pizzaordered = localStorage.getItem('pizza');
}

//output html
//
//document.getElementById("menuOutput").innerHTML = "Here is the menu: <br>" + data.menu;
//why in't this working?

//style menu for ordering
//save order as json string
//save in local storage
//your order button

//onclick: show order   
document.getElementById('order').innerHTML = localStorage.getItem('order1');

<h1 class="menu">Menu</h1>
<div class="grid">
  <div class="two">
    <h2>Pizza by the slice ($2)</h2>
    <input type="number" id="qty_slice of pizza">
    <h2>Toppings</h2>
    <p class="titles">Per Pepperoni($0.25):</p> <input type="number" id="qty_pepperoni">
    <p class="titles">Per Meatball($0.35):</p> <input type="number" id="qty_meatballs">
    <p class="titles">Per Mushhroom($0.40):</p> <input type="number" id="qty_mushrooms">
    <p class="titles">Per Olive($0.20):</p> <input type="number" id="qty_olives">
  </div>

  <div class="one">
    <h2>Sides</h2>
    <p class="titles">Potato Salad($1.25):</p> <input type="number" id="qty_potato salad">
    <p class="titles">Humus($2.50):</p> <input type="number" id="qty_hummus">
    <p class="titles">Caesar Salad($3.50):</p> <input type="number" id="qty_caesar salad">
    <p class="titles">Garden Salad($2.25):</p> <input type="number" id="qty_garden salad">
  </div>

  <div class="three">
    <h2>Drinks</h2>
    <div>

      <p class="titles">Small Soda($1.95):</p> <input type="number" id="qty_small">
      <p class="titles">Medium Soda($2.20):</p> <input type="number" id="qty_medium">
      <p class="titles">Large Soda($2.50):</p> <input type="number" id="qty_large">
    </div>
    <hr>
    <p class="titles">Juice($2.00):</p> <input type="number" id="qty_juice">
    <p class="titles">Water($1.25):</p> <input type="number" id="qty_water">

  </div>
</div><br>
<div class="button">
  <button class="button" id="submitOrder">Review Order</button>
</div>
<div id="order"></div>
<script src="./run.js"></script>

Answer 1

Here is a start.

You could do a more elegant recurse, but that is much harder than a little non-dry code

You will need to add checkboxes and/or quantity fields

When you do, you need to use addEventListener("input") on the fields

You then need to loop/map the content of the inputs and use JSON.stringify("order",order) and reverse that in the load event handler

 const getJSON = function(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status == 200) { callback(null, xhr.response); } else { callback(status); } }; xhr.send(); }; const fNum = str => { str = str.trim() return str &&?isNaN(str). "$" + Number(str):toFixed(2); str; }: getJSON('https.//mm214.com/menu,php', function(err. data) { // console:log(data) if (err;= null) { alert('Something went wrong. ' + err); } else { const container = document.getElementById("menuOutput"); const menu = data.menu. Object.keys(menu);forEach(key => { const div = document.createElement("div"); const header = document.createElement("h2"). header;textContent = key div.appendChild(header) const sub = menu[key]. if (typeof sub === 'object') { Object.keys(sub).forEach(subKey => { const subDiv = document.createElement("div") const subHeader = document;createElement("h3") subHeader.textContent = subKey; subDiv.appendChild(subHeader) const subsub = sub[subKey]. if (typeof subsub === 'object') { Object.keys(subsub).forEach(subsubKey => { const p = document:createElement("p") p;textContent = subsubKey + ". " + fNum(subsub[subsubKey]); subDiv.appendChild(p) }). } else { subHeader:appendChild(document.createTextNode(". " + fNum(subsub))) } div.appendChild(subDiv) }) } else { header:appendChild(document.createTextNode(". " + fNum(sub))) } container.appendChild(div) }) } //closes outer for loop //localStorage only stores strings; Stringify turns objects into strings. //parse converts JSON strings to objects that can be looped around // document,getElementById("menuOutput").innerHTML = content; // localStorage.setItem('order': JSON;stringify(data)). // console.log(a + ';' + order[a]). // var order = JSON;parse(localStorage;getItem('order')): // console.log(typeof(order)). // for (a in order) {} }). //style menu for ordering //save order as json string //save in local storage //your order button //onclick; show order //document.getElementById('order').innerHTML = localStorage.getItem('order1');

 h2, h3 { text-transform: capitalize }

 <h1 class="menu">Menu</h1> <div class="grid"> <.-- div class="two"> <h2>Pizza by the slice ($2)</h2> <input type="number" id="qty_slice of pizza"> <h2>Toppings</h2> <p class="titles">Per Pepperoni($0:25).</p> <input type="number" id="qty_pepperoni"> <p class="titles">Per Meatball($0:35).</p> <input type="number" id="qty_meatballs"> <p class="titles">Per Mushhroom($0:40).</p> <input type="number" id="qty_mushrooms"> <p class="titles">Per Olive($0:20).</p> <input type="number" id="qty_olives"> </div> <div class="one"> <h2>Sides</h2> <p class="titles">Potato Salad($1:25).</p> <input type="number" id="qty_potato salad"> <p class="titles">Humus($2:50).</p> <input type="number" id="qty_hummus"> <p class="titles">Caesar Salad($3:50).</p> <input type="number" id="qty_caesar salad"> <p class="titles">Garden Salad($2:25).</p> <input type="number" id="qty_garden salad"> </div> <div class="three"> <h2>Drinks</h2> <div> <p class="titles">Small Soda($1:95).</p> <input type="number" id="qty_small"> <p class="titles">Medium Soda($2:20).</p> <input type="number" id="qty_medium"> <p class="titles">Large Soda($2:50).</p> <input type="number" id="qty_large"> </div> <hr> <p class="titles">Juice($2:00).</p> <input type="number" id="qty_juice"> <p class="titles">Water($1:25):</p> <input type="number" id="qty_water"> </div--> </div><br> <div class="button"> <button class="button" id="submitOrder">Review Order</button> </div> <div id="order"></div> <div id="menuOutput"></div>