title: What is the best way to iterate through a JSON object and print elements to the screen?
body: <p>I'm just trying to learn the most efficient way to manipulate JSON data and slap it up on the screen. I'm a noob so try to break your answer down clearly if you can. Javascript and jQuery solutions welcome. Something like this:</p>
  
  <hr>
  
  <p><strong>Meats</strong></p>
  
  <ul>
  <li>NY Strip $20.00</li>
  <li>Ribeye $19.00</li>
  </ul>
  
  <p><strong>Vegetables</strong></p>
  
  <ul>
  <li>Kale $4.00</li>
  <li>Sunchokes $3.20</li>
  </ul>
  
  <hr>
  
  <p>This is the JSON object (could it be rewritten more efficiently?):</p>
  
  <pre><code>var foods = { 
     "category":{
         "Meats":[
             {
                "product":"NY Strip",
                "price":20.00,
                "cost":14.00,
                "total sold": 3
             },
             {
                "product":"Ribeye",
                "price":20.00,
                "cost":14.00,
                "total sold": 6
             }
         ],
         "Vegetables":[
             {
                "product":"Kale",
                "price":4.00,
                "cost":2.00,
                "total sold": 10
             },
             {
                "product":"Sunchokes",
                "price":3.20,
                "cost":1.00,
                "total sold": 5
             }
         ]
      }
  }
  </code></pre>
  
  <hr>
  
  <p>Here is my attempt: (wish I knew of a way to incorporate the category titles into the loops instead of hard coding them.)</p>
  
  <pre><code>&lt;h3&gt;Meats&lt;/h3&gt;
  &lt;script&gt;
      for(key in foods.category.Meats){
         document.write("&lt;li&gt;" + foods.category.Meats[key].product + " $" + foods.category.Meats[key].price + "&lt;/li&gt;"); 
      }
  &lt;/script&gt;
  &lt;h3&gt;Vegetables&lt;/h3&gt;
  &lt;script&gt;
      for(key in foods.category.Vegetables){
         document.write("&lt;li&gt;" + foods.category.Vegetables[key].product + " $" + foods.category.Vegetables[key].price + "&lt;/li&gt;"); 
      }
  &lt;/script&gt;
  </code></pre>