underscore.js - 如何在 Handlebarsjs underscorejs 中按字母顺序显示名称

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 模板和/或将其放入帮助程序中(但是要小心将 HTML 字符串作为规则)，但这很容易。此外，您可能希望对 groupedContacts 进行排序，以便也按顺序获取索引。您可以使用上面示例中显示的相同 sortBy 方法来执行此操作。