javascript - Angular 4'te birden fazla sütuna göre gruplandırma

Angular 4'te bir diziyi gruplayarak işlem yapmaya çalışıyorum. Diziyi gruplayabilmek için özel pipe yaklaşımını kullanıyorum, aşağıda bulduğum şekilde:

https://www.competa.com/blog/custom-groupby-pipe-angular-4/

Ama birden fazla sütuna göre gruplamaya çalışıyorum.

Veri

var myArray = [
    {
        name: "Apple",
        color: "Green",
        grade: "A1"
    },
    {
        name: "Apple",
        color: "Red",
        grade: "A1"
    },
    {
        name: "Apple",
        color: "Green",
        grade: "A2"
    },
    {
        name: "Apple",
        color: "Red",
        grade: "A2"
    },
];

Burada birden fazla sütuna göre gruplamak istiyorum, örneğin, isim ve Not.

Bunu kullanmayı denedim ama faydası olmadı:

<li *ngFor="let object of myArray | groupBy:'name,grade'"></li>

Lütfen bu sorunu çözmek için değerli çözümlerinizi sağlayın. Yardımınız için teşekkür ederim. Teşekkürler.

Cevap #1

Bileşende dizinizi reduce fonksiyonunu kullanarak gruplayabilirsiniz :

groups = Object.values(this.myArray.reduce(function(r, e) {
      var key = e.name + '|' + e.grade;
      if (!r[key]) r[key] = e;
      else {
        r[key].color = e.color;
      }
      return r;
}, {}));

https://jsfiddle.net/ov4nx7ad/

Cevap #2

Benim açımdan en iyi yol lodash kullanmaktır.

HTML:-

<ul>
    <li *ngFor="let object of myArray | groupBy:['color','name']"></li>
</ul>

Boru:-

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: Array): Array {

        if(!collection) {
            return null;
        }
        var notNull = _.negate(_.isNull);
        const groupedCollection = _.groupBy(collection, function(note){
                          return _.find(_.pick(note, property), notNull);
        });
        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

İlgili makaleler