Display JSON data in angular-data-table

Question

I want to display the following JSON data set in an angular-data-table

{"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}}

Here is my code so far

  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 not able to display the data properly in the table. It just shows [object, object]. I just need to display the object number in the left column and the hrefs in right columns.

Answer 1

Hi Skydev your json is starts an object so you need to separate an array and use that array in table.

I have created stackblitz for you.

https://stackblitz.com/edit/angular-data-table-muthu-yso865

Html preview visit the example you need access mf.data variable.

Html:-

 <tr *ngFor="let item of mf.data; let i=index">
        <td>{{i+1}}</td>
        <td>{{item.href}}</td>
    </tr>

Code:-

 data={"_links":{"self":[{"href":"http://uni/api/v1/cycle1"},{"href":"http://uni/api/v1/cycle2"},{"href":"http://uni/api/v1/cycle3"}]}};

 console.log("Data",this.data._links.self);

screenshot:-