Adding a dynamic column primeNG Angular 2. Make column for each object in the array

Question

I have a list of person which I want to display in a primeng datatable. The person object has this fields (firstName, lastName, continentsVisited). continentVisited field is an array of continent visited by the person. This continentsVisited is dynamic. What I want is to have a seperate column for each continent visited in addition to firstName and lastName.

export class AppComponent {
    persons: any [] = [
        {"firstName": "paolo","lastName":"revira","continentsVisited": [
               { "continent":"Europe", "name": "UK" },
               { "continent":"Asia", "name": "China" },
               { "continent":"North America", "name": "US" }
          ]},
        {"firstName": "kenneth","lastName":"santos"},"continentsVisited": [
               { "continent":"Europe", "name": "France" },
               { "continent":"Asia", "name": "Japan" },
               { "continent":"North America", "name": "Canada" }
          ]},
        {"firstName": "chris","lastName":"kenndy"},,"continentsVisited": [
               { "continent":"Europe", "name": "Germany" },
               { "continent":"Asia", "name": "Philippines" },
               { "continent":"North America", "name": "Mexico" }
          ]},
        ];

    ngOnInit() {

    }
}


<p-dataTable [value]="persons" [editable]="true"  resizableColumns="true" reorderableColumns="true"> 
    <p-column field="firstName" header="First Name" [editable]="true"></p-column>
    <p-column field="lastName" header="Last Name"></p-column>
</p-dataTable>

I have created a plunkr for this. here's the link https://plnkr.co/edit/gS1wsI?p=preview

Aravind Aravind · Accepted Answer · 2017-06-17T18:07:18

You can use the below code,

<p-dataTable [value]="persons">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-dataTable>

Typescript code

export class App {
  name:string;
  value:any;
   persons: any [] = [
        {"firstName": "paolo","lastName":"revira","continentsVisited": [
               { "continent":"Europe", "name": "UK" },
               { "continent":"Asia", "name": "China" },
               { "continent":"North America", "name": "US" }
          ]},
        {"firstName": "kenneth","lastName":"santos","continentsVisited": [
               { "continent":"Europe", "name": "France" },
               { "continent":"Asia", "name": "Japan" },
               { "continent":"North America", "name": "Canada" }
          ]},
        {"firstName": "chris","lastName":"kenndy","continentsVisited": [
               { "continent":"Europe", "name": "Germany" },
               { "continent":"Asia", "name": "Philippines" },
               { "continent":"North America", "name": "Mexico" }
          ]}
        ];
cols:any[]=[];
  constructor() {
    Object.keys(this.persons[0]).forEach(item=>{
      console.log(item)
      this.cols.push({field: item, header: item});
    })
  console.log(this.cols    );
    this.name = `Angular Prime Data table Dynamic columns`
  }

Update 1 : Based on screenshot

HTML will look like

<p-dataTable [value]="newPersons">
    <p-column *ngFor="let col of cols" [field]="col.field" 
               [header]="col.header"></p-column>
</p-dataTable>

Typescript code :

for(let i =0 ; i <this.persons.length;i++){
  let temp={
    firstName : this.persons[i].firstName,
    lastName : this.persons[i].lastName
  }
  this.persons[i].continentsVisited.forEach(item=>{
  let keyValue = Object.values(item);
  console.log(keyValue)
   temp[keyValue[0].toString()] = keyValue[1]

}
 this.newPersons.push(temp);
}
console.log(this.newPersons)
Object.keys(this.newPersons[0]).forEach(item=>{
  this.cols.push({field: item, header: item});
})

Note: Update in the below demo

LIVE DEMO

Adding a dynamic column primeNG Angular 2. Make column for each object in the array

1 Answers