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.

where is your dataset or json data ,if you can post that completely. — Hameed Syed
– Hameed Syed, Commented Feb 7, 2019 at 5:33
you have traversed the object to get data. put billing._links.self in *ngFor — Puni
– Puni, Commented Feb 7, 2019 at 5:33
iI is locally stored json data. I have shown it completely above. — RRB
– RRB, Commented Feb 7, 2019 at 5:34
I think I have altered the format of the json in my getBillingCycles() function which may be causing the issue — RRB
– RRB, Commented Feb 7, 2019 at 5:39

Karnan Muthukumar · Accepted Answer · 2019-02-07 05:47:36Z

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:-

answered Feb 7, 2019 at 5:47

Karnan Muthukumar

1,8731 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display JSON data in angular-data-table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related