sort and hide duplicate fields table angular 4+ - html

Question

I want to sort the table by name and first name and if we find duplicate fields we leave one line by adding an accordion to show duplicates or masked.
I put the ts and html code

Answer 1

i have create this sample for you, i have remove Observable to simplify the code :
First i have create new structure with some meta data information.
isFirst and isExpended are useful on html side to manage "hide/show" state of related Clients.
export interface OrderedClient {
isUniq: boolean;
isFirst: boolean;
isExpended: boolean;
info: Client;
}
I have put dummy data on constructor to show you how to classify this:
export class AppComponent {
private clients: Client[];
displayClients: OrderedClient[];
constructor() {
this.clients = [
{id: 1, lastname: 'git',firstName: 'yanis', birthDate:'03/19/1990'},
{id: 2, lastname: 'git',firstName: 'yanis', birthDate:'01/01/1990'},
{id: 3, lastname: 'lorem',firstName: 'yanis', birthDate:'01/01/1990'}
];
this.classify();
}
private classify() {
this.displayClients = [];
// For each existing clients.
this.clients.forEach((client: Client) => {
// We create new structure describe by OrderedClient interface.
this.displayClients.push(
// We merge client and getInformation output.
Object.assign({
info: client
},this.getInformation(client))
);
});
}
private getInformation(client: Client): {
isFirst: boolean,
isUniq: boolean,
isExpended: boolean
} {
// We fetch all clients who have same first and last name.
const clients = this.clients.filter(current => {
return current.lastname === client.lastname && current.firstName === client.firstName;
});
// We create meta information
return {
// If is first item of list.
isFirst: clients[0].id === client.id,
// if he is alone.
isUniq: clients.length === 1,
// If he is visible by default.
isExpended: clients.length === 1 || clients[0].id === client.id
};
}
toggleRelated(client:Client)
{
//When we click on toggle button. we loop on all clients.
this.displayClients.forEach(e => {
// If current one have same first and last name and is not the first element of associated clients.
if(e.info.firstName === client.firstName && e.info.lastname === client.lastname && !e.isFirst) {
// Then we toggle expended state.
e.isExpended = !e.isExpended;
}
});
}
}
for each clients, i will check if we can find similar other entry on document. Goal is to populate isFirst and isExpended. Now we can use this new structure on our html as bellow :
<div class="m-table" data-module="scrollable">
<table>
<thead>
<tr>
<th>#</th>
<th sortable-column="lastname" scope="col">Nomtrie</th>
<th sortable-column="firstname" scope="col">Prénomtrie</th>
<th scope="col">Date de naissancetrie</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let data of displayClients">
<tr *ngIf="data.isExpended">
<td><button *ngIf="data.isFirst && !data.isUniq" (click)="toggleRelated(data.info)">toggle</button></td>
<td scope="col">{{data.info.lastname}}</td>
<td scope="col">{{data.info.firstName}}</td>
<td scope="col">{{data.info.birthDate}}</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
online sample

Answer 2

You can "map" your result, adding a property to check if is repeated, but first of all you must ordered the array
this.searchService.getAllClients()
.subscribe(results =>{
//first sort
results.sort((a, b) => {
return a.lastname + a.firstname == b.lastname + b.firstname ? 0 :
a.lastname + a.firstname > b.lastname + b.firstname ? 1 : -1;
//After, map the result adding a new propertie
this.results=result.map((x) => {
return {...x, uniq: results.find(
f => f.lastname + f.firstname == x.lastname + x.firstname) == x }
})
),
error =>console.log('results', error );
Notice, I use this.result.find that return an element. if this element is equal so self, is the first one of them