How to display only unique values in the dropdown using Angular 2

Question

I have a JSON data from which I am displaying 'accountNumber' into a dropdown using *ngFor. Since there are multiple entries in JSON data with the same account number, I am seeing the same account number multiple times in the dropdown. enter image description here

html:

<div class="btn btn-default dropdown-toggle" type="button" 
  id="dropdownMenu" data-toggle="dropdown" aria-expanded="true">

  <span>Select</span>
  <span class="caret"></span>
  <ul class="select-menu" aria-labelledby="dropdownMenu">
    <li *ngFor="#account of accounts">{{account.accountNumber}}</li>
  </ul>
</div>

json:

`[
{
    "accountNumber": 7890,
    "transactionDate": "4/2/2016",
    "postingDate": "4/3/2016",
    "description": "Pok Pok Thai",
    "category": "Restaurants",
    "amount": 15.00
},
{
    "accountNumber": 7890,
    "transactionDate": "4/3/2016",
    "postingDate": "4/4/2016",
    "description": "Pok Pok Hai",
    "category": "Hotel",
    "amount": 25.00
},

{
    "accountNumber": 8901,
    "transactionDate": "4/6/2016",
    "postingDate": "4/7/2016",
    "description": "Pok Pok Fai",
    "category": "Dairy",
    "amount": 55.00
},
{
    "accountNumber": 8901,
    "transactionDate": "4/7/2016",
    "postingDate": "4/8/2016",
    "description": "Pok Pok Aai",
    "category": "Automotive",
    "amount": 65.00
},

{
    "accountNumber": 4567,
    "transactionDate": "4/9/2016",
    "postingDate": "4/10/2016",
    "description": "Pok Pok Cai",
    "category": "Healthcare",
    "amount": 85.00
},
{
    "accountNumber": 4567,
    "transactionDate": "4/10/2016",
    "postingDate": "4/11/2016",
    "description": "Pok Pok Dai",
    "category": "Healthcare",
    "amount": 95.00
},

{
    "accountNumber": 8901,
    "transactionDate": "4/12/2016",
    "postingDate": "4/13/2016",
    "description": "sit amet",
    "category": "Software",
    "amount": 115.00
}
 ]`

How can I avoid displaying duplicate values of the account number in the dropdown?I am assuming it will require a custom pipe but not sure how to do that.

I am new to Angular 2 and tried looking for the solution but couldn't find anything that suits my need.

Then you didn't search hard enough :) stackoverflow.com/questions/34417250/… — Jan B.
– Jan B., Commented Jul 13, 2016 at 22:30
You could load the account numbers into a set, and then iterate your ngFor over that. — bhzag
– bhzag, Commented Jul 13, 2016 at 22:35

Community · Accepted Answer · 2017-05-23 11:54:14Z

1

There is already post explaing basic of pipes with examples: How to apply filters to *ngFor

See the working plunker for your case http://plnkr.co/edit/E7HlWeNJV2N3zwPfI51Q?p=preview .. I have used lodash library and its uniqBy function, then the pipe is really that simple:

declare var _: any; // lodash, not strictly typed

@Pipe({
    name: 'uniqFilter',
    pure: false
})
@Injectable()
    export class UniquePipe implements PipeTransform {
        transform(items: any[], args: any[]): any {

        // lodash uniqBy function
        return _.uniqBy(items, args);
    }
}

.. and the usage in your component:

<div>
    <ul>
        <li *ngFor="let account of accounts | uniqFilter: 'accountNumber'">{{ account.accountNumber }}</li>
    </ul>
</div>

EDIT: I've updated the plunker to latest Angular version, and added filtering parameter to the pipe.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jul 13, 2016 at 22:43

Petr Adam

1,45711 silver badges24 bronze badges

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

6 Comments

abhi Over a year ago

I am getting the error in this line return .uniqBy(items, "accountNumber"); The error is [ts] Cannot find name ''. any As I found here- stackoverflow.com/questions/34660265/…, Do we need to import lodash before using it? I have referenced it like this <script src="cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></…> in my index.html. Some problem with underscore(_) before uniqBy.

Petr Adam Over a year ago

Yes, you need to reference lodash before using it, but thats in my plunker in index.html if you have opened it... try to add declare var _: any; before your @Pipe, I have updated the answer..

abhi Over a year ago

It worked. Thanks @Petr Adam. Only difference being, I had to use '#account of accounts' instead of 'let account of accounts' as it was throwing template parse error.

Craig Over a year ago

How would you use this to get uniques only of a specific type and by a changing field name...used something like this...*ngFor="let account of accounts | uniqFilter: 'accountNumber'" ?

Petr Adam Over a year ago

I've updated the answer with pipe parameter, is that what you need?

|

Collectives™ on Stack Overflow

How to display only unique values in the dropdown using Angular 2

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related