How to use nunjucks groupby with different value?

Question

i can`t figure out how can i gropBy my data from Json when i have this kind of values

    2017-10-16 12:07:07
2017-10-16 12:07:07
2017-10-16 15:09:08
2017-10-16 15:09:08
2017-10-16 15:09:08
2017-10-16 15:09:08
2017-10-16 15:09:08
2017-10-16 18:11:09
2017-10-16 18:11:09
2017-11-29 17:26:57
2017-11-29 17:26:57
2017-11-29 17:26:57
2017-11-29 19:31:03

My template

 <div class="container">
      <div class="row">
          <div class="col-5">
               {% for date , block in block | groupby("date") %}
                 <div class="date">{{date |date }}</div>
              {% endfor %}

          </div>
      </div>
  </div>

and in output i have

16 Oct
16 Oct
16 Oct
3 Nov
29 Nov
29 Nov

i want to have

  16 Oct
  3 Nov
  29 Nov

Maybe in due to at first i took all data from Json , then i grouped it and only after that i use my dateFilter , but how can i due it in different way?

My gulpfile.js gulpfile

update 19.12.18

<div class="container">
       <div class="row">
            {% for date, block in block | groupby("date", "datefilter") %}
           <div class="col-5">
                <div class="date">
                        <h3> {{date}}</h3>
                        <p>amount {{block.length}}</p> // this line will give me amount of products for every day . 
                    </div>
              {% for id, block in block | groupby("id") %}
               <div class="id"> 
              {% for name, block in block | groupby("name") %}
                <p>{{name}} № {{ id }}  </p>
             </div>
               {% endfor %}
            {% endfor %}
           </div>

            {% endfor %}
       </div>
   </div>

example output

Answer 1

Below I improved standard groupby(prop) filter to groupby(prop, filter).

In my code I use roundDate instead date name for date-rounder-filter.

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

env.addFilter('roundDate', (e) => e.substring(0, 7));

env.addFilter('groupby', function (arr, prop, filter) {
    var res = {};
    var iterator = typeof prop == 'function' ? prop : (e) => e[prop];
    var func = this.env.filters[filter] || ((e) => e);
    arr.forEach(function (e, i) {
        var key = func(iterator(e, i));
        (res[key] || (res[key] = [])).push(e);
    })
    return res;
})

var data = [
    {date: "2017-10-16 12:07:07", value: "123"},
    {date: "2017-10-16 12:07:07", value: "123"},
    {date: "2017-10-16 15:09:08", value: "123"},
    {date: "2017-10-16 15:09:08", value: "123"},
    {date: "2017-10-16 15:09:08", value: "123"},
    {date: "2017-10-16 15:09:08", value: "123"},
    {date: "2017-10-16 15:09:08", value: "123"},
    {date: "2017-10-16 18:11:09", value: "123"},
    {date: "2017-10-16 18:11:09", value: "123"},
    {date: "2017-11-29 17:26:57", value: "123"},
    {date: "2017-11-29 17:26:57", value: "123"},
    {date: "2017-11-29 17:26:57", value: "123"},
    {date: "2017-11-29 19:31:03", value: "123"}
]

var res = env.renderString(`
    {% for a, items in data | groupby('date', 'roundDate') %}
       {{a}} {{items.length}}
    {% endfor %}
    `,
    {data}
);

console.log(res);

Answer 2

i did like this , is it right ?

var manageEnvironment = function(environment) {

        environment.addFilter('datefilterq', dateFilter);
        dateFilter.setDefaultFormat('D MMM');
        environment.addFilter('groupby', function (arr, prop, filter) {
          var res = {};
          var iterator = typeof prop == 'function' ? prop : (e) => e[prop];
          var func = this.environment.filters[filter] || ((e) => e);
          arr.forEach(function (e, i) {
              var key = func(iterator(e, i));
              (res[key] || (res[key] = [])).push(e);
          })
          return res;
        })


}

Answer 3

Your group by is returning 16 Oct multiple times because you have different time values listed on that date. If you first format your dates to only show the date and not the time, your group by should work. You could try this to extract only the dart part - you can substitute the locale string for another of your preference if you wish.

var date = new Date("2017-11-29 19:31:03").toLocaleDateString("en-US");
console.log(date);