how to display names in alphabetical groups in Handlebarsjs underscorejs

Question

Hi am New to Handlebarsjs.

I have a collection of contacts with name, email, phone, etc. as below

[
  {
    \"name\": \"Bob Wolmer\",
    \"email\": \"bo         


        

Answer 1

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.

Answer 2

First you need to define the Handlebars Template that suits your JSON layout;

{{#list people}}{{name}} {{email}} {{phone}} {{address}} {{contactId}} {{labels}}{{/list}}

I assume people is the name of your JSON list like this;

{ people: [
  {
    "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"}]
  }
]}

Then you can register your list Handlebars template using like this and iterate through your JSON;

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  var names = [];
  var letters = [];
  for(var i=0, l=items.length; i<l; i++) {
    name = items[i].name;
    if(name == ""){
        continue;
    }
    var firstLetter = name.substring(0,1);
    var arrayWithFirstLetter = names[firstLetter];
    if(arrayWithFirstLetter == null){
       names[firstLetter] = [];
       letters.push(firstLetter);
    }
    var firstName = name.indexOf(" ") == -1 ? name : name.substring(0,name.indexOf(" "));
    names[firstLetter].push(firstName)
  }

  for(var i=0; i < letters.length; i++) {
     out = out + "<li>" + letters[i] + "</li>";
     for(var k=0; k < names[letters[i]].length; k++){
       out = out + "<li>" + names[letters[i]][k] + "</li>";
     }
  }

  return out + "</ul>";
});

The output is;

• B
• Bob
• Brad
• W
• Wilma