Angular: Dynamically find headers when converting JSON array to HTML table

Question

In Angular, I want to convert a JSON array to an HTML table.

I have seen an old answer for AngularJS:

<table>
    <thead>
      <tr>
        <th ng-repeat="(key, value) in records[0]">{{key}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="(key, value) in records">
        <td ng-repeat="(key, value) in value">
          {{value}}
        </td>
      </tr>
    </tbody>
</table>

JSON looks like this:

[{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
}]

I've tried to translate it to the Angular syntax. Here is what I got so far:

<table>
    <thead>
      <tr>
        <th *ngFor="let item of records[0]  | keyvalue">{{item.key}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of records">
        <td *ngFor="let item1 of item | keyvalue">
          {{item1.value}}
        </td>
      </tr>
    </tbody>
</table>

Right now it's failing to compile because records[0] is undefined... how can I translate this expression to the newer syntax (or create something equivalent)?

UPDATE 1:

I have a partial solution. However with this partial solution the rendered table is not completely identical to the older AngularJS rendition (because it creates multiple unnecessary header rows, which only one of them is populated, as opposed to only one header row in the older rendition).

<table style="border-collapse: collapse;">
    <thead *ngFor="let item of records; let last=last">
      <tr *ngIf="last">
        <th *ngFor="let item1 of item | keyvalue">
          {{item1.key}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of records">
        <td *ngFor="let item1 of item | keyvalue">
          {{item1.value}}
        </td>
      </tr>
    </tbody>
</table>

Do you have a better way to do it, possibly similar to the older AngularJS version?

UPDATE 2:

In Angular, I access the JSON data through a request from Angular that is then redirected to a back end service. That service may read a file, or get the data from a database. When the back end service has the data ready, it returns the data to the Angular request. The code on the Angular end looks like this:

  HTML:

  <div>
    <h3>Test Post Request</h3>
    <button (click)="postData()">Click Me</button>
    <div>Response: {{records}}</div>
  </div>

  TypeScript:

  private dataPostTestUrl = '/api/postTest';
  records: string | undefined;

  public postData(): void {
    this.appService.sendData().subscribe((data: any) => {
      this.records = data.content;
    });
  }

  public sendData(): Observable<any> {
    return this.http.post(this.dataPostTestUrl, {});
  }

Answer 1

I think maybe you need to define records in the component.

records = [{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
}];

Answer 2

I am fairly certain this is what you need: https://stackblitz.com/edit/angular-ivy-n7irpw?file=src/app/hello.component.ts

Take a look at how I import the file in the app.component.ts As well as how I loop in the HTML.

Let me know if it helps!