How to show only unique values from data instead of all

Question

I wanted to show only unique values in the div instead of all.

<div *ngFor="let user of allUser">
{{user.gender}}
</div>

But right now, it's populating all the values as per the screenshot

What changes do I need to do to show only unique values here? It should show 2 values as : Male and Female.

here's a good example on how you can filter your values to get only the unique ones: https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates — Vasile Rusu, Dec 22 '20 at 13:07
@yazan will that be a filter something like `{{user.gender | unique }}` — Kunal Vijan, Dec 22 '20 at 13:07
Please don't post relevant code/input/output as images. A good resource is [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — pilchard, Dec 22 '20 at 13:12

score 3 · Accepted Answer · answered Dec 22 '20 at 13:15

3

Create a getter in ts file(name could be anything).

get uniqueGenders(){
    return new Set(this.allUser.map(x=>x.gender))
}

and use it in template

<div *ngFor="let item of uniqueGenders">
  {{item}}
</div>

read more about getter and setter here

answered Dec 22 '20 at 13:15

Nilesh Patel

it's throwing an error saying `ERROR TypeError: Cannot read property 'map' of undefined` – Kunal Vijan Dec 22 '20 at 13:26
how are you getting `allUser` data? Please share code – Nilesh Patel Dec 22 '20 at 13:30
1

or put a check `get uniqueGenders(){ return this.allUser? new Set(this.allUser.map(x=>x.gender)): [] }` – Nilesh Patel Dec 22 '20 at 13:31

score 0 · Answer 2 · answered Dec 22 '20 at 13:34

I guess they are stored in an array..? You can use the set (as mentioned by yazan)

let ngFor=['male', 'male', 'female', 'male', 'female']

let gender = [...new Set(ngFor)]

2 Answers2