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>