Just starting out with Angular and facing a challenge in the Milestone section. There is a loop for displaying years and months, but I need to ensure that the month name is displayed only once for each specific year. Can someone provide me with a possible solution? Below are my HTML and TypeScript codes:
HTML Code
<section class="milestone-wrapper">
<section class="milestone-wrap-info">
<ul class="timeline">
<li *ngFor="let milestone of formattedMileStoneData">
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">{{milestone.Year}}</span>
</div>
<div class="desc" *ngFor="let month of milestone.Month">
<label>{{month.MonthName}}</label>
<p>{{month.Details}}</p>
</div>
</div>
</li>
</ul>
</section>
</section>
Provided Data:
"data": [
{
"Id": "42",
"Year": "2021",
"MonthName": "December",
"Details": "Introduce Minimum Wage Allowance for government staff",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": "0"
},
{
"Id": "41",
"Year": "2021",
"MonthName": "December",
"Details": "Complete the pay structure model used in the Pay Framework",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": "0"
},
{
"Id": "18",
"Year": "2021",
"MonthName": "October",
"Details": "Formulate the Job Evaluation Guidelines",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": "0"
}];
My TypeScript Code:
this.formattedMileStoneData = this.allMileStones.reduce((a: any, b: any) => {
const element = a.find((x: any) => x.Year == b.Year);
if (element) element.Month.push(b);
else a.push({ Year: b.Year, Month: [b] });
return a;
}, []);
The current result can be seen here.
The desired result should look like this.
If you have any suggestions on how to achieve the desired outcome, please help me out. Thank you!