I am trying to showcase the following JSON dataset within an angular-data-table
{"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}}
This is what I have written so far in my code
getBillingCycles() {
this.BillingCyclesService.getBillingCycles()
.subscribe((data) => {
this.billing = [data];
console.log(this.billing);
});
}
<table class="table table-striped" [mfData]="billing" #mf="mfDataTable" [mfRowsOnPage]="5">
<thead>
<tr>
<th style="width: 30%">
<mfDefaultSorter by="billingcycle">Billing Cycle</mfDefaultSorter>
</th>
<th style="width: 70%">
<mfDefaultSorter by="link">Link</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.billing">
<td>{{item.billingcycle}}</td>
<td>{{item}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
I am encountering difficulty in properly displaying the data in the table. It currently only shows [object, object]. My goal is to display the object number in the left column and the hyperlinks in the right columns.