How to create a datatable with arbitrary columns and data?

Question

I have an application where an user can make a selection in a dropdown which triggers a request and the output - in this case a table - is shown on the website. The data always comes in JSON format like this:

'{"columns":["C1","C2"], "data":[[8,98],[22,95],[43,29],[79,29]]}';
'{"columns":["foo","bar","xyz"], "data":[[27,26,3],[54,80,93],[92,10,90]]}';

In the jQuery world, I could then always do something like this:

table = $("#a_nice_table").DataTable({
              data: response.data,
              columns: response.columns
            });

and the table shows in the div called a_nice_table.

I would now like to do the same in Angular, but struggle with the population of the website.

I have a component dt-dropdown.component like this:

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

@Component({
  selector: 'app-dt-dropdown',
  templateUrl: './dt-dropdown.component.html',
  styleUrls: ['./dt-dropdown.component.css']
})
export class DtDropdownComponent implements OnInit {

  ddSelector: string = "";
  response: any;
  tableJSON1: string = '{"columns":["C1","C2"], "data":[[8,98],[22,95],[43,29],[79,29]]}';
  tableJSON2: string = '{"columns":["foo","bar","xyz"], "data":[[27,26,3],[54,80,93],[92,10,90]]}';

  constructor(private http: HttpClient) { }

  ngOnInit() { }

  getTable() {
    this.http.get('https://api.github.com/users/alan-agius4') // + this.ddSelector
    .subscribe((response) => {

      // usually without the if-clause
      if (this.ddSelector === 'type1') {
        this.response = JSON.parse(this.tableJSON1);
      } else {
        this.response = JSON.parse(this.tableJSON2);
      }
      // this.response = response;
      console.log(response);
      console.log(JSON.parse(this.tableJSON1));
    });
  }
}

The if clause is now just for demonstration purposes; usually this is not needed and the response would be directly passed.

The corresponding HTML looks like this:

Choose something: 
<select [(ngModel)]="ddSelector">
    <option>type1</option>
    <option>type2</option>
</select>
<button (click)="getTable()">Get table!</button>
<div *ngIf="response">
    <table datatable class="row-border hover">
        <thead>
            {{ response.columns }}
        </thead>
        <tbody>
            {{ response.data}}
        </tbody>
    </table>
</div>

That, however, always results in

ERROR TypeError: "aoColumns[srcCol] is undefined"

How would I do this correctly?

I guess I cannot not just use {{ response.columns }} and {{ response.data}} but somehow need to loop, but not sure.

Answer 1

try to display data in HTML file this way:

<table datatable class="row-border hover">
    <thead>
       <tr>
        <th *ngFor="let column of response.columns">
          {{ column }}
        </th>
       </tr>
    </thead>
    <tbody>
     <tr *ngFor="let row of response.data">
       <td *ngFor="let cell of row">{{cell}}</td>
     </tr>
    </tbody>
</table>