javascript配列を印刷する：a1 a2 a3 b次にb1 b2 b4 c then c1 c2 c3（ノックアウト）

Question

私の質問は、アルファベットを使ってjavascript配列を最初にカテゴリとして印刷するにはどうすればいいですか？これは私が欲しいものです：

どのように私は言葉でこのように行われますか？私の配列はそれぞれの文字の下にある単語だけです。

私はこれにどのようにアプローチしますか？

<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

：

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：シンプルなバニラはJavaScriptでhttps://lodash.com/docs#groupBy