I have a specific object structure in my code that I need to work with:
{
"changeRequest": [{
"acrId": 11,
"ccrId": "",
"message": "test message"
},
{
"acrId": 12,
"ccrId": "123456",
"message": "Car Generation successful."
}
],
"assessmentDetails": [{
"qId": 1749
},
{
"crList": [{
"compName": "Chevrolet Cobra",
"cId": "169576",
"acrId": 11
}],
"qId": 1737
},
{
"qId": 1738,
"crList": [{
"compName": "Ferrari",
"cId": "169586",
"acrId": 11
}],
},
{
"crList": [{
"compName": "Mercedez Benz",
"cId": "169575",
"acrId": 12
},
{
"compName": "Isdera",
"cId": "169577",
"acrId": 12
}
],
"qId": 1739
}
]
}
Currently, I am using Angular and the ngFor directive to iterate through the changeRequest array to display either the ccrId if not empty or the message if it is. However, I now have a requirement to group the component names based on the acrId and display them as a nested list.
The expected output should look like this:
<ol>
<li>
test message
<ul>
<li>Chevrolet Cobra</li>
<li>Ferrari</li>
</ul>
</li>
<li>
123456
<ul>
<li>Mercedez Benz</li>
<li>Isdera</li>
</ul>
</li>
</ol>This grouping functionality needs to be implemented in both HTML and TypeScript files. Here is an example of how it can potentially be achieved:
HTML
<ol>
<ng-container>
<li *ngFor="let crObj of formatedBfaData">
<ng-container
*ngTemplateOutlet="crObj.crId ? displayCrLink : displayCrErrorMessage; context:{ $implicit: crObj}">
</ng-container>
<ng-template #displayCrLink let-crObj>
<div class="pb-2">{{ crObj.crId }}</div>
</ng-template>
<ng-template #displayCrErrorMessage let-crObj>
<div class="text-danger">{{crObj.name}}</div>
</ng-template>
</li>
</ng-container>
</ol>
TS
this.formatedBfaData = data.changeRequest.map(crObj => {
return {crId: crObj.ccrId !== '' ? crObj.ccrId: null, name: crObj.message}
})
I would appreciate any guidance on how to properly implement the required grouping logic. Thank you!