How to set table heading dynamically in angular 2?

Question

I am getting JSON data and I am storing JSON data on my property.

this.ResultData_search=data.json().extras.ResultData 

this.ResultData=[

  {
        "First_name": "xx",
        "Email": "xxxx",
        "Phone": "xxx",
        "countryCode": "+91",
        "order_datetime": "xxx",
        "status": 11,
        "DeviceType": 3,
        "orderId": "59081a04c9ff6852a49dd32a",
        "orderseqId": "E00002347",
        "orderType": 1,
        "CustomerID": "xx",
        "pickAddress": "xx",
        "dropAddress": "xx",
        "pickLatitude": 17.4369414,
        "dropLatitude": 17.43673,
        "dropLongitude": 78.36710900000003,
        "paymentType": 2,
        "itemDescription": "",
        "receiverName": "uday",
        "receiverPhone": "xx",
        "itemName": "sanjay",
        "deliverycharge": "199",
        "bookingType": 1
      }
      }]

I want to set all keys as table heading and data as table rows. I referred to the below linkshttps://stackoverflow.com/questions/40713580/angular2-table-with-dynamic-rows-and-columns

Link 2:Dynamically loading columns and data in to table in Angular 2

Any plunker will be very helpful to me.

i created one pipe but it is printing table heading in tr only — paruvelly Vishwanath
– paruvelly Vishwanath, Commented May 9, 2017 at 8:15

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

The key solution is to convert the Object ResultData into an array of keys. Then you can easily iterate over it. You can get the keys of the object using Object.keys(this.ResultData).

component.ts

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <table>
  <thead>
    <tr>
      <td *ngFor=" let key of keys">
        {{key}}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor=" let res of ResultData">
      <td *ngFor=" let key of keys">
        {{res[key]}}
      </td>
    </tr>
  </tbody>
</table>
  `,
})
export class App {
  name:string;
  ResultData=[
  {
        "First_name": "xx",
        "Email": "xxxx",
        "Phone": "xxx",
        "countryCode": "+91",
        "order_datetime": "xxx",
        "status": 11,
        "DeviceType": 3,
        "orderId": "59081a04c9ff6852a49dd32a",
        "orderseqId": "E00002347",
        "orderType": 1,
        "CustomerID": "xx",
        "pickAddress": "xx",
        "dropAddress": "xx",
        "pickLatitude": 17.4369414,
        "dropLatitude": 17.43673,
        "dropLongitude": 78.36710900000003,
        "paymentType": 2,
        "itemDescription": "",
        "receiverName": "uday",
        "receiverPhone": "xx",
        "itemName": "sanjay",
        "deliverycharge": "199",
        "bookingType": 1
      } 
      ]
  constructor() {
  }
   keys: string[]=[]; 

  ngOnInit() { 
       this.keys= Object.keys(this.ResultData[0])
  }
   
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

This link has an alternative way of using a pipe to convert a JSON object into an array.

Here is a working plunkr.

Regading the following part :

    <tr *ngFor=" let res of ResultData">
      <td *ngFor=" let key of keys">
        {{res[key]}}
      </td>
    </tr>

ResultData is an array of items. For each item we will create a table row, and we will display the content of each item. That is why we repeat <tr> for each item res in the array ResultData.

Then, for each item res in the ResultData we will iterate over the array of keys we prepared earlier in the ts code. For each item key in the keys we will display the value of item as {{res[key]}}.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 9, 2017 at 8:37

Amr Eladawy

4,3797 gold badges36 silver badges52 bronze badges

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

4 Comments

paruvelly Vishwanath Over a year ago

i am getting table headings like 0,1,2, ...but i want table heading like First_name,Email,Phone ..like this.Thanks in advance

paruvelly Vishwanath Over a year ago

Thank sir,u saved me.i already marked as correct answer.but my reputations is below 15

paruvelly Vishwanath Over a year ago

sir,could you explain these lines if u don't mind <tr *ngFor=" let res of ResultData_search"> <td *ngFor=" let key of keys"> {{res[key]}} </td> </tr>

dxpkumar Over a year ago

@AmrElAdawy. I am working on similar requirement to dynamically load table headers and data. But the {{res[key]}} does not work. When I use {{res["name"]}} in place of key the actual field name in single or double quote it works..<tr *ngFor=" let res of resultData"> <td>{{res["podName"]}}</td> <td *ngFor=" let key of keys"> {{res[key]}} </td> </tr>

Collectives™ on Stack Overflow

How to set table heading dynamically in angular 2?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related