You can easily archive this using underscore in your angular app.
https://stackoverflow.com/questions/37569537/how-to-use-underscore-js-library-in-angular-2
groupedSeriesNames = []
groupedSeries = []
Certificate[] = [
{ serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
{ serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
{ serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 },
{ serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
{ serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
];
this.groupedSeries = _.groupBy(this.Certificate, certificate=>certificate.serie);
this.groupedSeriesNames = Object.keys(this.groupedSeries)
The certificate.serie will become they key, you can change the certificate.serie to any other property like iden or whatever you need
your html
<ul class="cert-result">
<li *ngFor="let key of groupedSeriesNames">
<table *ngFor="let certificate of groupedSeries[key]">
<tr>
<th>Serie</th>
<th>Element</th>
<th>Composition</th>
</tr>
<tr>
<td>{{certificate.serie}}</td>
<td>{{certificate.ident}}</td>
<td>{{certificate.moy_certifiee}}</td>
</tr>
</table>
</li>
</ul>
You have to change the data structure.
Solution.
> your data
export const CERTIFICATES: Certificate[] = [
{ serie: '1050 AJ', ident: 'Fe', moy_certified: 0.297 },
{ serie: '1050 AJ', ident: 'Cu', moy_certified: 0.04 },
{ serie: '1050 AJ', ident: 'Mn', moy_certified: 0.0374 },
{ serie: 'X332.0 AC', ident: 'V', moy_certified: 0.019 },
{ serie: 'X4002 AA', ident: 'Mn', moy_certified: 0.037 }
];
Create a method in your component. let say `formatedData()`
import { CERTIFICATES } from './certificate';
class AppComponent {
//Todo...
objectKey(obj) {
return Object.keys(obj);
}
formatedCerts() {
return CERTIFICATES.reduce((prev, now) => {
if (!prev[now.serie]) {
prev[now.serie] = [];
}
prev[now.serie].push(now);
return prev;
}, {});
/*
Now your data : { "1050 AJ": [ .... ], "X332.0 AC": [...], ... }
*/
}
}
Now in template:
<ul class="cert-result">
<li *ngFor="let key of objectKey(formatedCerts())">
<span>{{key}}</span>
<table>
<tr>
<th>Élément</th>
<th>Moy. Certifiée</th>
</tr>
<tr *ngFor="let certificate of formatedCerts()[key]">
<td>{{certificate.ident}}</td>
<td>{{certificate.moy_certifiee}}</td>
</tr>
</table>
</li>
</ul>
If you want to optimize, store the data of `formatedCerts()` into a variable.
