打印javascript数组：打印A然后a1 a2 a3 B然后b1 b2 b4 C然后c1 c2 c3（敲除）

Question

我的问题是：如何打印一个 javascript 数组，开头以 alfabet 作为类别？这就是我想要的：

A
 Aapje
 Antje
 Appeltje
B
 Bepje
 Bafke
 Befke
C
 Come
 Cool
 Crap

我怎样才能像这样打印带有单词的数组？我的数组只是它们各自字母下的单词。

我该如何处理？

这是我目前的代码：

<script>var clientSideViewModel = [{"categorie":"Aapje"},{"categorie":"Bapje"},{"categorie":"Capje"},{"categorie":"Dapje"},{"categorie":"Eapje"},
    {"categorie":"Fapje"},{"categorie":"Gapje"},{"categorie":"Hapje"},{"categorie":"Iapje"},
    {"categorie":"Japje"},{"categorie":"Kapje"},{"categorie":"Lapje"},
    {"categorie":"Mapje"},{"categorie":"Napje"},{"categorie":"Oapje"},{"categorie":"Papje"},
    {"categorie":"Qapje"},{"categorie":"Aapje"},{"categorie":"Sapje"},{"categorie":"Tapje"},{"categorie":"Uapje"},{"categorie":"Vapje"}]<?php //echo json_encode($model); ?>; </script>

<h1>Category</h1>
<div class="columns">
    <ul data-bind="foreach: ListOfItems">
        <li data-bind="text: categorie">

    </li>
    </ul>
</div>

顺便说一句，使用淘汰赛。 ListOfItems = 可观察数组剔除模型对象。我不受淘汰赛的束缚，但与它兼容的解决方案不会有什么坏处。

Answer 1

您可以使用lodash的_.groupBy方法：

var grouped = _.groupBy(clientSideViewModel, function (obj) {
    return obj.categorie.substr(0, 1).toUpperCase();
});

查看这个 JSBin：http://jsbin.com/wofufezuwi/edit?js,console

lodash: https://lodash.com/docs#groupBy

Answer 2

简单香草 JavaScript：

    var model = [{"categorie":"Aapje"},{"categorie":"Bapje"},{"categorie":"Capje"},{"categorie":"Dapje"},{"categorie":"Eapje"},
        {"categorie":"Fapje"},{"categorie":"Gapje"},{"categorie":"Hapje"},{"categorie":"Iapje"},
        {"categorie":"Japje"},{"categorie":"Kapje"},{"categorie":"Lapje"},
        {"categorie":"Mapje"},{"categorie":"Napje"},{"categorie":"Oapje"},{"categorie":"Papje"},
        {"categorie":"Qapje"},{"categorie":"Aapje"},{"categorie":"Sapje"},{"categorie":"Tapje"},{"categorie":"Uapje"},{"categorie":"Vapje"}];

    var map = {};

    model = model.sort(function(a, b){
      return a.categorie > b.categorie ? -1 : 1;
    });

    for (var i=0; i<model.length; i++) {
      var entry = model[i];
      var first = entry.categorie.charAt(0);
      if (!map[first]) {
        map[first] = [];
      }
      map[first].push(entry.categorie);
    }

    console.log('map:', map);

打印javascript数组：打印A然后a1 a2 a3 B然后b1 b2 b4 C然后c1 c2 c3（敲除）

Print javascript array: print A then a1 a2 a3 B then b1 b2 b4 C then c1 c2 c3 (knockout)

javascript

arrays

categories

knockout.js