如何在Handlebarsjs下划线中按字母顺序组显示名称

Question

嗨,我是Handlebarsjs的新手.

我有一系列联系人,包括姓名,电子邮件,电话等,如下所示

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

我想显示如下名称

B
Bob
Brad

W
Wilma Erra

任何人都可以建议我如何实现这一目标.

提前致谢

Answer 1

让我们假设您已将JSON分配给名为的变量contacts您可以使用下划线按名称属性的第一个字母进行分组,如下所示:

var groupedContacts = _.groupBy(contacts, function(contact){ 
    return contact.name.substr(0,1); 
});

然后,您可以遍历您的组,也可以按照您的示例对它们进行排序并编写内容,如下所示:

_.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); 
     });
});

因此,在现实世界的应用程序中,您可能希望console.log用Handlebars模板替换这些行和/或将其放在帮助器中(但是要注意在JavaScript中嵌入HTML字符串),但这很容易.此外,您可能希望groupedContacts按顺序排序以获取索引.您可以使用sortBy上面示例中显示的相同方法执行此操作.