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

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

enter image description here

1 answer

  • answered 2017-06-17 17:55 Aravind

    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