2

嗨，我是 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

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

提前致谢

4

2 回答 2

10

假设您已将该 JSON 分配给名为的变量，contacts您可以使用下划线按 name 属性的第一个字母进行分组，如下所示：

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上面示例中显示的相同方法来执行此操作。

于 2013-07-12T13:59:44.707 回答
2

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

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

我假设 people 是您的 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
  • 威尔玛
于 2013-07-12T14:30:08.763 回答