Q:

how to display names in alphabetical groups in Handlebarsjs underscorejs

Hi am New to Handlebarsjs.
I have a collection of contacts with name, email, phone, etc. as below
[
  {
    "name": "Bob Wolmer",
    "email": "bob@wolmer.com",
    "phone": "(535) 235-1234",
    "address": "301 Cobblestone Wy., Berdrock 00000",
    "contactId": "1121",
    "labels": {}
  },
  {
    "name": "Wilma Erra",
    "email": "wilma@erra.com",
    "phone": "(535) 235-3659",
    "address": "301 Cobblestone Wy., Berdrock 70777",
    "contactId": "1122",
    "labels": {}
  },
  {
    "name": "Brad",
    "email": "brad@brad.com",
    "phone": "(535) 235-3546",
    "address": "301 Cobblestone Wy., Redrock 70777",
    "contactId": "1123",
    "labels": [{"name": "Friends"},{"name": "Family"}]
  },
  {
    "name": "",
    "email": "wilson@gmail.com",
    "phone": "(535) 235-3657",
    "address": "301 Cobblestone Wy., Dedrock 70777",
    "contactId": "1124",
    "labels": [{"name": "Friends"}]
  }
]

I want to display the names as below
B
Bob
Brad

W
Wilma Erra

Can any one suggest me how to achieve this.
Thanks in Advance

A:

Lets just say that you have assigned that JSON to a variable named contacts You can use underscore to group by the first letter of the name property like so:
var groupedContacts = _.groupBy(contacts, function(contact){ 
    return contact.name.substr(0,1); 
});

You could then iterate through your groups, maybe sort them and write the content as per your example like this:
_.each(groupedContacts, function (contacts, key) {

    console.log(key); // writes the Index letter

    // optional sort
    var sortedContacts = _.sortBy(contacts, function (contact) {
         return contact.name;
     });

     _.each(sortedContacts, function(contact) {
         // Writes the contact name
         console.log(contact.name); 
     });
});

So in a real world application, you would want to replace the console.log lines with Handlebars templates and/or put it in a helper (however be wary of embedding HTML string in JavaScript as a rule), but thats the easy bit. Also, you may wish sort your groupedContacts to get the index in order too. You can do this using the same sortBy method shown in my example above.

