ngFor full list and unique list

Question

Apologies if this is a duplicate question, I'm new to Angular and I've tried to implement a number of solutions to no avail and can't seem to find a thread that answers my problem.

I'm in the initial stages of setting up a web app so for now I'm using an InMemoryDataService (I do have services set up in Laravel, just don't have them tied in yet) that looks like this:

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
createDb() {
const passwords = [
{ id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
{ id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
{ id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
{ id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
{ id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
{ id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
{ id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];
return {clients};
}
}

I can get it to display fine and build out a data table using ngFor but I want to also have a select menu using only the unique teams so like this:

<select>
<option value="1">Dragons</option>
<option value="2">Eagles</option>
<option value="3">Wolves</option>
</select>

What is the best way to accomplish this?

You can either create a property that contains an array of only unique items (which is the easiest solution), or create a [filter pipe](https://angular.io/guide/pipes#flyingheroespipe) that groups your records for you (which is more re-usable). — Dean, Aug 02 '18 at 21:35
Here is a [very simple group by example](https://stackoverflow.com/questions/48376224/how-to-group-by-array-in-angular-4-or-5). You could follow a similar pattern. After your data is return from the service, group it, then store it in a field called `groupedData` or something. — Dean, Aug 02 '18 at 21:37
Consider using a pipe: https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor#35536052 — mchl18, Aug 02 '18 at 21:45

score 1 · Answer 1 · answered Aug 03 '18 at 05:36

You can use lodash library whichever angular provide by deafult in newer version

There is uniqBy property which removes duplication.

e.g.

let clients = [
    { id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
    { id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
    { id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
    { id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
    { id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
    { id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
    { id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];

clients = _.uniqBy(clients, 'team_name');
console.log(clients);

Using a lambda would be tpge safe, unlike your current answer: `team => team.team_name`. Lodash does support this. — Ingo Bürk, Aug 03 '18 at 06:05
Thanks for all of the replies, this one worked the best for me, I really appreciate it! — angler, Aug 03 '18 at 13:42

score 1 · Answer 2 · answered Aug 03 '18 at 06:06

You don't need lodash for this, and pipes are also a bad idea for this (see https://angular.io/guide/pipes#no-filter-pipe).

Simply create a list of unique elements using some modern Javascript:

this.uniqueTeams = Array.from(new Set(teams.map(team => team.team_name)));

This is type-safe, dependency-free and doesn't have performance issues.

score 0 · Accepted Answer · answered Aug 02 '18 at 21:39

You could do something like this:

const clients = [
    { id: 1, team_id: 1, team_name: 'Dragons', fname: 'Bob', lname: 'Smith'},
    { id: 2, team_id: 1, team_name: 'Dragons', fname: 'Jason', lname: 'Roberts'},
    { id: 3, team_id: 1, team_name: 'Dragons', fname: 'Mike', lname: 'Ferraro'},
    { id: 4, team_id: 2, team_name: 'Eagles', fname: 'Jeremy', lname: 'Lovano'},
    { id: 5, team_id: 2, team_name: 'Eagles', fname: 'Robert', lname: 'Casey'},
    { id: 6, team_id: 3, team_name: 'Wolves', fname: 'Mark', lname: 'Thomas'},
    { id: 7, team_id: 3, team_name: 'Wolves', fname: 'Steve', lname: 'Garner'}
];

const uniqueTeams = [];

clients.forEach(client => {
   if(unqiueTeams.indexOf(client.team_name) === -1) {
       uniqueTeams.push(client.team_name);
   }
});

console.log(uniqueTeams);

ngFor full list and unique list

3 Answers3

Linked