How to get unique elements using pipe in angular 4

2019-08-17 11:47发布

问题:

I have my facilityListArray as below and I have clinicServices array inside it and I want to filter only unique elements from this clinicServices (get unique parentName object ) array list. Below is the screen shot of facilityListArray. In the attached image, I have shown the expanded list for first array list which has list of clinicService. Similarly inside second list, I have list of clinicServices which has duplicates of the first list. So i want to get only unique clincServices from entire list of array.

Below is my pipe file:

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

@Pipe({
  name: 'removeduplicate'
})
export class RemoveduplicatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    // Remove the duplicate elements
    const art = value.map( x => {
        return x.clinicServices.map(y => {
            return y.value;
        });
    }).reduce((acc, ele, i) => {
        acc = acc.concat(ele);
        return acc;
    });
    return new Set(art);
}
}

HTML code Using Pipe :

 <div class="col-sm-12 required" *ngFor="let facilitySearchResult of facilityListArray | removeduplicate">

                                    <label class="container">
                                      <input type="checkbox">{{facilitySearchResult}}
                                      <span class="checkmark"></span>
                                    </label>
                                  </div>

HTML code without pipe:

If i use the below code without pipe, I am getting list if clinicService properly but with duplicate elementes. So i implemented the above Pipe code and used that in my HTML as above, but it doesnt work. I am getting empty list with above code . Any help is highly appreciated.

 <div class="col-sm-12 required" *ngFor="let facilitySearchResult of facilityListArray; let i=index">
                                <div class="col-sm-12 required" *ngFor="let facilityServiceResult of facilitySearchResult.clinicServices; let j=index">
                                  <label class="container">
                                    <input type="checkbox">{{facilityServiceResult.parentName}}
                                    <span class="checkmark"></span>
                                  </label>
                                </div>
                              </div>

回答1:

One small error in your Pipe

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

@Pipe({
    name: 'removeduplicate'
})
export class RemoveduplicatePipe implements PipeTransform {

    transform(value: any, args?: any): any {
        // Remove the duplicate elements
        const art = value.map( x => {
            return x.clinicServices?x.clinicServices.map(y => {
                return y.parentName?y.parentName:null; //<--parentName instead of value
            }):[];
        }).reduce((acc, ele, i) => {
            acc = acc.concat(ele);
            return acc;
        }).filter(z=>{ //<--to filter out null parentNames
            if(z){
                return z;
            }
        });
        return new Set(art);
    }
}

And you should be able to get the unique parentName of clinicServices