Filter unique elements from array using Pipe filter in Angular

Question

I am trying to implement pipes using Angular. Below is the code I have tried. I want to retrieve unique for the complete list . So i have added a pipe filter name for the inner list . But i am still getting the duplicate elements. I have added the json for reference .The inner ArticleTags array has a list of objects. Similarly I have multiple ArticleTags array for every parent Array. I want to retrieve the unique elements from the entire list ArticleTags array. I think its retrieving the unique elements within the particular inner list and not retrieving from the entire list of Article Tags.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterUnique',
    pure: false
  })
  export class FilterPipe implements PipeTransform {
    transform(value: any, args?: any): any {
      // Remove the duplicate elements
      const uniqueArray = value.filter(function (el, index, array) {
        return array.indexOf (el) === index;
      });
      return uniqueArray;
    }
  }







<ul>
          <li *ngFor="let articlesResult of articlesListArray; let i=index">
            <ul>
              <li  *ngFor="let articlesTagResult of articlesResult.ArticleTags | filterUnique; let j=index">
                <i class="fa fa-times-circle" *ngIf="articlesResult.ArticleTags[j].value"></i>
                <label class="form-check-label" for="exampleCheck" *ngIf="articlesResult.ArticleTags[j].value">{{articlesResult.ArticleTags[j].value}}</label>
              </li>
            </ul>
          </li>
        </ul>


getLatestArticles(currdate): void {
    this.ng4LoadingSpinnerService.show();
    this.ArticlesServiceCall.getArticlesDashboard(currdate)
      .subscribe(
        resultArray => {
          this.ng4LoadingSpinnerService.hide();
          this.articlesList = resultArray;
          this.articlesLists = resultArray.ResponseValue;
          this.articlesListArray = this.articlesLists.slice(0, 8);
        },
        error => console.log('Error :: ' + error)
      );
  }

I am getting the main array data from articlesListArray and passing that in html

Edit update on July 09 2018

Getting the below error with the below pipe code.

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

@Pipe({ name: 'filterduplicates' }) export class FilterduplicatesPipe implements PipeTransform {

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

}

so you are looping through articlesListArray to get articlesResult, then in second <li> tag you are looping through articlesResult.ArticleTags to get unique articlesTagResult, but instead of using articlesTagResult.value, you are using articlesResult.ArticleTags[j].value? — j4rey
– j4rey, Commented May 15, 2018 at 5:00
Okay so i tried to use <label class="form-check-label" for="exampleCheck">{{articlesTagResult.value}}</label> but still it retrieves the duplicate elements . I have also attached the screen shot of output for your reference . The second array is a list of elements. Back, Injury ,Lifestyle , Shoulder comes under one list. As per my assumption , it is retrieving the unique elements with in that array. But it doesnt compare with other list of array elements, or I am not sure . — Nancy
– Nancy, Commented May 15, 2018 at 5:06
okay i get it now, you have list of articles, every articles has tags, and you want the union of tags of all articles....right? — j4rey
– j4rey, Commented May 15, 2018 at 5:24
@ j4rey89 Any clue on this how to achieve from .ts file . I have pasted .ts code for reference. — Nancy
– Nancy, Commented May 15, 2018 at 6:35

j4rey · Accepted Answer · 2018-05-16 06:55:49Z

2

Assuming your article[] is like so:

articles = [
    {
        ArticleTitle: 'article one',
        ArticleTags: [
            {key:0, value:'Back'},
            {key:1, value:'Shoulder'},
            {key:2, value:'Injury'},
            {key:3, value:'Abs'}]
    },
    {
        ArticleTitle: 'article two',
        ArticleTags: [
            {key:3, value:'Abs'},
            {key:1, value:'Shoulder'},
            {key:4, value:'Leg'},
            {key:5, value:'Others'}]}
]


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterUnique',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        // Remove the duplicate elements
        var art = value.map(x=>{
            return x.ArticleTags.map(y=>{ return y.value;});;
        }).reduce((acc,ele,i)=>{
            acc = acc.concat(ele);
            return acc;
        });
        return new Set(art);
    }
}

above pipe returns a set of string containing the value of articletag.

<ul>
    <li *ngFor="let a of articles | filterUnique">{{a}}</li>
</ul>

edited May 16, 2018 at 6:55

answered May 15, 2018 at 7:22

j4rey

2,7071 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Nancy Over a year ago

I used the code in pipe file and getting error Cannot read property 'map' of undefined . Could you please remove the repetitive code from your answer and have a single answer . I see there are lots of repetitions. However, I get the above error with the code that you had mentioned in pipe file.

j4rey Over a year ago

removed the repetitive code.....As for Cannot read property 'map' of undefined, map is a property of Array make sure the data is of type Array.

Nancy Over a year ago

Actually I am getting the list of unique elements displayed :) , but with the error message Cannot read property 'map' of undefined, map is a property of Array in console :( But still I am accepting your answer.

j4rey Over a year ago

kindly check the green tick, if my answer helped solved your problem.

Nancy Over a year ago

I have done. .But do you know why i am getting that error although I am getting the correct unique list?

|

Soumya B. Athani · Accepted Answer · 2018-05-15 05:10:56Z

1

Refere this there unique filter is given https://www.npmjs.com/package/ng2-pipes

  ex:   array | unique: 'Property (Optional)'
        this.items = [1, 2, 3, 1, 2, 3];
        <li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->

answered May 15, 2018 at 5:10

Soumya B. Athani

3781 gold badge3 silver badges13 bronze badges

1 Comment

Soumya B. Athani Over a year ago

ok, then try to use sets in angular to your response from server it will display only unique elements

Sanoj_V · Accepted Answer · 2018-05-15 05:37:46Z

0

First import into module

`import { FilterPipe} from 'your-custom-pipe-path';`

then You should inject custom pipe in

@NgModule({
declarations: [
     FilterPipe
    ]
})

Rest of code is fine. hope this will help you.

answered May 15, 2018 at 5:37

Sanoj_V

2,9961 gold badge14 silver badges33 bronze badges

2 Comments

Nancy Over a year ago

I have already done all those. My requirement is well understood by j4rey89 as he had mentioned in his comment.

Sanoj_V Over a year ago

can you try to inject in your component @Component({ pipes: [FilterPipe] }) try this also.

Collectives™ on Stack Overflow

Filter unique elements from array using Pipe filter in Angular

3 Answers 3

10 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related