Как использовать nunjucks groupby с другим значением? - PullRequest
Новая
       23

Как использовать nunjucks groupby с другим значением?

0 голосов
/ 15 декабря 2018

Я не могу понять, как я могу нащупать мои данные от Json, когда у меня есть такие значения 

    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

Мой шаблон 

 <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>

и на выходе у меня есть 

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

я хочу получить 

  16 Oct
  3 Nov
  29 Nov

Возможно, из-за того, что сначала я взял все данные у Json, затем я сгруппировал их, и только после этого я использую свой dateFilter, но как можноя должен по-другому?

Мой gulpfile.js gulpfile

обновление 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>

пример вывода

Ответы [ 3 ]

0 голосов
/ 16 декабря 2018

Ниже я улучшил стандартный groupby(prop) фильтр до groupby(prop, filter).

В моем коде я использую roundDate вместо date имя для фильтра даты-округлителя. 

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);
0 голосов
/ 16 декабря 2018

Мне так понравилось, верно?

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;
        })


}
0 голосов
/ 16 декабря 2018

Ваша группа по возвращается 16 октября несколько раз, потому что у вас есть разные значения времени, указанные на эту дату.Если вы сначала отформатируете свои даты, чтобы показать только дату, а не время, ваша группа должна работать.Вы можете попробовать это, чтобы извлечь только часть дротика - вы можете заменить строку локали на другую из ваших предпочтений. 

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