打印javascript数组:打印A然后a1 a2 a3 B然后b1 b2 b4 C然后c1 c2 c3(淘汰赛)

时间:2016-05-25 12:43:32

标签: javascript arrays knockout.js categories

我的问题是:如何在开始时用alfabet作为类别打印javascript数组?这就是我想要的:

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 =可观察的数组淘汰模型对象。 我没有与淘汰赛联系在一起但是让解决方案与之兼容并不会受到伤害。

2 个答案:

答案 0 :(得分:2)

您可以使用lodash的{​​{1}}方法:

_.groupBy

查看此JSBin:http://jsbin.com/wofufezuwi/edit?js,console

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

答案 1 :(得分:2)

简单的vanilla 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);