How to separate items rendered from .getJSON by category prop

Question

I've got a menu of coffee, for example, each with it's own parentCategory and I want to render them on the page like so but I'm not entirely sure where to start:

category title
- item
- item
- item
- item
category title
- item
- item

My data model looks like this:

{ "menuItems": [
 {
    "index": 0,
    "parentCategory": "Americanos", 
    "calories": 234,
    "name": "Caffè Americano",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/67c30b9dacd4406db797b1690ac22475.jpg"
    }
  }, {
    "index": 0,
    "parentCategory": "Lattes", 
    "calories": 234,
    "name": "Caffè Latte",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/aee68ca3048142f38741f20b30b7a581.jpg"
    }
  }, {
    "index": 0,
    "parentCategory": "Mochas", 
    "calories": 234,
    "name": "Caffè Mocha",
    "photos": {
      "squareThumb": "http://www.starbucks.com/assets/bc15a5ca9d744b66bda07254f2f50013.jpg"
    }
  }...

and my current script looks like so:

$.getJSON('menu.json', function(drinks) {
  var getMenuItem  = drinks.menuItems;
  var sortedArray = getMenuItem.sort(function(a,b){
    return a.parentCategory > b.parentCategory ?1 :-1
  })
  var output = "";
  for (var i in sortedArray) {
      output += "<div class='menuItem'><p>" + drinks.menuItems[i].name + "</p><img src='" + drinks.menuItems[i].photos.squareThumb + "'/></div>";
  }
  document.getElementById("demo").innerHTML=output;
});

Use nested `
`. The outer list contains the category names, the inner list contains the item names. — Barmar, Jun 06 '16 at 04:08
Use a variable to hold the last category. In your loop, whenever the category changes, you close the old DIV and start a new one. — Barmar, Jun 06 '16 at 04:10
Here's an answer that shows how to do it in PHP. The logic is the same in JS: http://stackoverflow.com/questions/27575562/how-can-i-list-has-same-id-data-with-while-loop-in-php/27575685#27575685 — Barmar, Jun 06 '16 at 04:11
I've been trying for a half hour to translate this to JS but my rookie nature is making it near impossible. It's not entirely clear to me what logic is being communicated in this PHP above. Any help would be much appreciated. — Jeremy P. Beasley, Jun 06 '16 at 06:32

score 0 · Answer 1 · answered Jun 06 '16 at 06:38

Keep the latest category in a variable. Whenever the category changes, start a new <div> for the category.

var last_cat = null;
var output = "";
for (var i in sortedArray) {
    var item = sortedArray[i];
    if (item.parentCategory != last_cat) {
        if (last_cat) { // close the previous category
            output += "</div>";
        }
        output += "<div class='category'><p>" + item.parentCategory + "</p>";
        last_cat = item.parentCategory;
    }
    output += "<div class='menuItem'><p>" + item.name + "</p><img src='" + item.photos.squareThumb + "'/></div>";
}
if (last_cat) {
    output += "</div>";
}

How to separate items rendered from .getJSON by category prop

1 Answers1