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

因此，在现实世界的应用程序中，您可能希望用Handlebars模板替换console.log行和/或将其放在帮助器中（但是要小心在JavaScript中嵌入HTML字符串），但那样做简单的一点。此外，您可能希望对groupedContacts进行排序，以便按顺序获取索引。您可以使用我上面示例中显示的相同sortBy方法执行此操作。

Answer 2

首先，您需要定义适合您的JSON布局的Handlebars模板;

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

我认为人是这样的JSON列表的名称;

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

然后你可以像这样注册你的list Handlebars模板并迭代你的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>";
});

输出是;

乙
鲍勃
布拉德
w ^
威尔玛

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

2 个答案: