打印javascript數組：然後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> 

使用淘汰賽BTW。 ListOfItems =可觀察數組挖空模型對象。我沒有與淘汰賽綁在一起，但它不會傷害到解決方案兼容。

Answer 1

簡單香草的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); 

Answer 2

您可以使用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