title: How to add key and value from JSON string into innerHTML using JavaScript
body: <p>How can I add the value into my for loop so that my innerHTML displays both key and value?  Thank you for your help!</p>
  
  <pre><code>    &lt;body&gt;
  
  &lt;section&gt;
  &lt;h2&gt;Toppings&lt;/h2&gt;
  &lt;ul id="toppings"&gt;    &lt;/ul&gt;
  &lt;/section&gt;
  
       &lt;/body&gt;
  &lt;script&gt;
  var myObj ={"menu": {"slice of pizza": "2.00", "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"}}};
  var extras ="";
  for(key in myObj.menu.toppings){
      if (myObj.menu.toppings.hasOwnProperty(key)) {
          extras +='&lt;li&gt;' +
          key + '&lt;/li&gt;';
              }
  }
  var update = document.getElementById('toppings').innerHTML = extras;
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>