Given a JSON object structured as follows:
{
"baskets": [{
"id": 127,
"name": "name 1",
"kpIs": [{
"id": 419,
"name": var a1, "incentive": 0, "target": "0", "actual": 0, "description": null
}, {
"id": 420,
"name": var a2, "incentive": 0, "target": "0", "actual": 0, "description": null
}],
"percentage": 0
}, {
"id": 128,
"name": "name 2",
"kpIs": [{
"id": 421,"name": "var b1","incentive": 0,"target": "0","actual": 0, "description": null
}, {
"id": 422, "name": "var b2","incentive": 0,"target": "3", "actual": 0, "description": null
}, {
"id": 423, "name": " var b3","incentive": 0,"target": "5.6","actual": 0,"description": null
}, {
"id": 424,"name": " var b4", "incentive": 0, "target": "2", "actual": 0, "description": null
}],
"percentage": 0
}],
"id": 23,
}
The objective is to calculate the combined totals (target, incentive and actual) for each nested object, as well as the overall totals for the entire object. The object has been linked to a table: https://i.sstatic.net/Gcai3.png.
<table class="table table-responsive table-bordered table-striped w-100%">
<thead>
<tr>
<th data-label="KPI Basket" scope="col">KPI Basket</th>
<th data-label="KPIs" scope="col">KPIs</th>
<th data-label="Tgt figures" scope="col">Target</th>
<th data-label="Tgt figures" scope="col">Actual</th>
<th data-label="Incentive" scope="col">Incentive</th>
<th data-label="% of Total" scope="col">Total</th>
</tr>
</thead>
<tbody *ngFor="let data of document.baskets; let i = index">
<tr style="margin: auto;" *ngFor="let obj of data.kpIs">
<td>{{ data.name }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.target }}</td>
<td>
<input
type="number"
[(ngModel)]="obj.actual"
name="actual{{j}}"
class="form-control"
(change)="performOperations(obj.actual, obj.target, obj.incentive )"
/>
</td>
<td>{{ obj.incentive }}</td>
<td>
<input
type="number"
[(ngModel)]="individualTotal"
name="individualTotal{{j}}"
class="form-control"
/>
</td>
</tr>
<tr>
<th data-label="KPI Basket" scope="row"></th>
<strong> <td data-label="KPIs">Sub-total</td></strong>
<td data-label="Incentive">{{ subTotal }}</td>
<td data-label="% of Total"></td>
<td data-label="Tgt figures"></td>
<td data-label="Tgts"></td>
</tr>
</tbody>
<tbody>
<tr>
<strong>
<tr data-label="KPIs">
Total
</tr></strong
>
<td data-label="KPI Basket" scope="row"></td>
<td data-label="Incentive"></td>
<td data-label="% of Total"></td>
<td data-label="Tgt figures">35</td>
<td data-label="Tgts">35</td>
</tr>
</tbody>
</table>
The subtotal field is meant to display the summed totals for the objects named "name 1" and "name 2." The total field should then show an aggregate total for the entire object. Any suggestions on how to accomplish this?