Within my angular application, I am fetching a dynamic list of objects from an API. A sample of the data structure is as follows:
[
{
"_id": "some id",
"DATE": "2021/01/08",
"COUNT": "23",
"AMOUNT": "268710"
},
{
"_id": "some id",
"DATE": "2021/09/18",
"COUNT": "2",
"AMOUNT": "1,167.73"
}
]
I am looking for a way to dynamically access the keys and values of each object without explicitly specifying them. This will allow me to display any additional objects with different keys that may be retrieved in the future. Can someone guide me on achieving this?
<tr
*ngFor="
let row of FilteredMatchTransactions
| paginate
: { itemsPerPage: itemsPerPage, currentPage: p };
let i = index
"
>
<td>
{{ KeysFilteredMatchTransactions[1] }} :
{{ row.DATE}}
</td>
<td>
{{ KeysFilteredMatchTransactions[2] }} : {{ row.COUNT}}
</td>
<td>
{{ KeysFilteredMatchTransactions[3] }} :
{{ row.AMOUNT}}
</td>
</tr>
TS :
ngOnInit(): void {
const Param = this.route.snapshot.queryParamMap.get('_id');
this._crudService.GetReportById(Param).subscribe((res) => {
this.MatchTransactions = res;
this.FilteredMatchTransactions = this.MatchTransactions.onlyInFile1;
this.KeysFilteredMatchTransactions = Object.keys(
this.FilteredMatchTransactions[0]
);
console.log(this.KeysFilteredMatchTransactions);
});