How to set table heading and data dynamically in angular 2/4 using Ionic 2/3?

Question

Presently i am getting the below Dynamic data in json and i am displaying in ionic grid

JSON data

{Type: "USD",Amount: 131295.21}
{Type: "Master",Amount: 11773.89}

{Type: "PAID",Amount: 51375.3}

{Type: "PAID",Amount: 25558.9}

{Type: "Visa",Amount: 15715.75}

{Type: "ZOM",Amount: 64771.55}

and im displaying in html file like below

<ion-grid>
      <ion-row >

        <ion-col>
         Type
        </ion-col>
        <ion-col text-right>
          Amount
        </ion-col>

      </ion-row>
      <div >
      <ion-row *ngFor="let value of resultData">

        <ion-col>
          {{value.Type}}
        </ion-col>
        <ion-col text-right>
          {{value.Amount|number:'.2'}}
        </ion-col>

      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>
        <ion-col text-right>
          {{TotalAmount|number:'.2'}}
        </ion-col>

      </ion-row>
        </div>
    </ion-grid>

here mainly below issues i am facing

1. how to set table headers and data dynamical at present i am setting the table heading statically suppose if a table row is not then i have to manually again edit the file

2. If i set dynamic header and data also along with columns ,How i can find the totals for that particular columns presently i am looping the Amount in future if i get netamount then how can i total that

3. If i have to use pipes like For Currency,Date,Time etc how can put it for individual columns

Answer 1

1. To set the table headers put in another ngFor for your headers you can get the property names using Object.keys(myObject) ; or you can use Object.getOwnPropertyNames(myObject)

2. If you use the above approach it means you loop for actual content is separate, I would work out the amount in the code behind and interpolate the value in the last column

3. This should be pretty straightforward when you decide to add a date you can add it in

   <ion-row *ngFor="let value of resultData"> <ion-col> {{value.Type}} </ion-col> <ion-col text-right> {{value.Amount | currency:'USD':true:'4.2-2'}} </ion-col> <ion-col text-right> {{value.Date | date:'shortTime'}} </ion-col> </ion-row>

Here is a plunker example home it helps https://plnkr.co/edit/Mzv8777npcxVkCmdx4Ka?p=preview

Hope that helps