Angular: Как использовать трубу groupBy в массиве - PullRequest
Новая
       10

Angular: Как использовать трубу groupBy в массиве

1 голос
/ 16 октября 2019 

import {
  Pipe,
  PipeTransform
} from '@angular/core';

/*
 * Group an array by a property (key)
 * Usage:
 *  value | groupBy : 'field'
 */

@Pipe({
  name: 'groupBy'
})
export class GroupByPipe implements PipeTransform {
  transform(value: Array < any > , field: string): Array < any > {
    // prevents the application from breaking if the array of objects doesn't exist yet
    if (!value) {
      return null;
    }
    const groupedObj = value.reduce((previousVal, currentVal) => {
      if (!previousVal[currentVal[field]]) {
        previousVal[currentVal[field]] = [currentVal];
      } else {
        previousVal[currentVal[field]].push(currentVal);
      }
      return previousVal;
    }, {});
    // this will return an array of objects, each object containing a group of objects
    return Object.keys(groupedObj).map(key => ({
      key,
      value: groupedObj[key]
    }));
  }

}

Я реализовал пользовательский канал groupBy, но он работает только для простой строки объекта, например, он работает, когда я передаю что-то вроде этого: 

console.log(new GroupByPipe().transform(this.selectedServices, 'name'));

Но я хочу передать что-то более сложное, как это: 

console.log(new GroupByPipe().transform(this.selectedServices,'paymentCycle.name'));

Я реализовал пользовательский канал groupBy, но он работает только для простой строки объекта.

Как я могу сделать этот каналпринять более сложную группу, например, такую: 

console.log(new GroupByPipe().transform(this.selectedServices, 'paymentCycle.name'));

1 Ответ

1 голос
/ 16 октября 2019

Предлагаю не реализовывать группу самостоятельно. Вместо этого используйте lodash groupBy, он способен на то, что вы ищете. 

    const data = [
      { foo: { name: "A", id: "1" } },
      { foo: { name: "B", id: "1" } },
      { foo: { name: "A", id: "2" }}
    ];

    console.log(_.groupBy(data, 'foo.name')); // import * as _ from 'lodash';

(см. https://lodash.com/docs/4.17.15#groupBy)

Результаты в 

{A: Array(2), B: Array(1)}
A: Array(2)
0: {foo: {…}}
1: {foo: {…}}
length: 2
__proto__: Array(0)
B: Array(1)
0: {foo: {…}}
length: 1
__proto__: Array(0)
__proto__: Object
...