bind data dynamically to p-table(column wise)

Question

I have a json data like following,and I am trying to present this data in the table format but unable to bind in the expected way. can someone please let me know if we can achieve this with p-table ?

here is what I am trying, but duplicate records can be seen row wise as let-car is loop thhrough the data.

stackblitz

data:

   {
        Year: 2023,
        InputData: {
          OilProduction: 0,
          GasProduction: 0,
          NGLProduction: 0,
        },
      },
      {
        Year: 2024,
        InputData: {
          OilProduction: 1,
          GasProduction: 2,
          NGLProduction: 3,
        },
      },
    ];

Expected design of the table:

parameter	2023	2024
oil production	0	1
gas production	0	2
NGL production	0	3

Answer 1

Its not the best, but it gets the job done!

• We can create a hashMap of the values on the array with the key being the year and the values.
• Then we create an array containing the titles and their appropriate key in the API
• then we create the final array which we send to prime ng table
• Note, we just need to provide the template in the HTML for prime ng table, we have three tr elements, we only need one which will be used for all the rows!

ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  cars: any[];
  carsFinal: any[];
  columns = [];

  ngOnInit() {
    this.cars = [
      {
        Year: 2023,
        InputData: {
          OilProduction: 0,
          GasProduction: 0,
          NGLProduction: 0,
        },
      },
      {
        Year: 2024,
        InputData: {
          OilProduction: 1,
          GasProduction: 2,
          NGLProduction: 3,
        },
      },
      {
        Year: 2025,
        InputData: {
          OilProduction: 1,
          GasProduction: 2,
          NGLProduction: 3,
        },
      },
    ];
    const propArray = [
      { title: 'Oil Production', key: 'OilProduction' },
      { title: 'Gas Production', key: 'GasProduction' },
      { title: 'NGL Production', key: 'NGLProduction' },
    ];
    const hashMap = {};
    this.cars.forEach((item: any) => {
      hashMap[item.Year] = item.InputData;
    });
    this.columns = Object.keys(hashMap);
    this.carsFinal = propArray.map((data: any) => {
      const item = {
        ...data,
      };
      this.columns.forEach((column: string) => {
        item[column] = hashMap[column][item.key];
      });
      return item;
    });
  }
}

html

<div class="ui-table-wrapper">
  <p-table [value]="carsFinal">
    <ng-template pTemplate="header">
      <tr>
        <th>parameter</th>
        <th *ngFor="let column of columns">{{ column }}</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
      <tr>
        <td>{{ car.title }}</td>
        <td *ngFor="let column of columns">{{ car[column] }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

stackblitz