Problem with empty object by rendering a table completely dynamic-CodePudding

What I want to achieve is to dynamically render a table header, rows and cells based on JSON, retrieved by an API call. The data i'm getting from the API is a dataframe.

This is the json'd dataframe (from console):

0: {Close: 2918.1, DateTime: '2022-02-17T19:08:00 00:00', High: 2920.2, Low: 2915.5, Open: 2917.3, …}
1: {Close: 2909.6, DateTime: '2022-02-17T19:09:00 00:00', High: 2918.1, Low: 2908.8, Open: 2918.1, …}
2: {Close: 2906, DateTime: '2022-02-17T19:10:00 00:00', High: 2910.2, Low: 2906, Open: 2909.6, …}
3: {Close: 2907.3, DateTime: '2022-02-17T19:11:00 00:00', High: 2910.3, Low: 2905.9, Open: 2906, …}
4: {Close: 2903, DateTime: '2022-02-17T19:12:00 00:00', High: 2907.6, Low: 2902.6, Open: 2907.3, …}
5: {Close: 2903.7, DateTime: '2022-02-17T19:13:00 00:00', High: 2906.9, Low: 2903, Open: 2903, …}
6: {Close: 2909.7, DateTime: '2022-02-17T19:14:00 00:00', High: 2909.7, Low: 2903.7, Open: 2903.7, …}
7: {Close: 2904.8, DateTime: '2022-02-17T19:15:00 00:00', High: 2909.7, Low: 2895.8, Open: 2909.7, …}
8: {Close: 2909.2, DateTime: '2022-02-17T19:16:00 00:00', High: 2911.9, Low: 2904.4, Open: 2904.8, …}
9: {Close: 2910.1, DateTime: '2022-02-17T19:17:00 00:00', High: 2916.2, Low: 2909.2, Open: 2909.2, …}
10: {Close: 2908.4, DateTime: '2022-02-17T19:18:00 00:00', High: 2912.7, Low: 2908, Open: 2909.8, …}
11: {Close: 2904.7, DateTime: '2022-02-17T19:19:00 00:00', High: 2908.7, Low: 2902.9, Open: 2908.4, …}
12: {Close: 2911.9, DateTime: '2022-02-17T19:20:00 00:00', High: 2912.3, Low: 2904.7, Open: 2904.7, …}
13: {Close: 2908.5, DateTime: '2022-02-17T19:21:00 00:00', High: 2912, Low: 2908.2, Open: 2911.9, …}
14: {Close: 2905.8, DateTime: '2022-02-17T19:22:00 00:00', High: 2908.5, Low: 2902.7, Open: 2908.5, …}
15: {Close: 2897.7, DateTime: '2022-02-17T19:23:00 00:00', High: 2905.8, Low: 2897.7, Open: 2905.8, …}
16: {Close: 2896.7, DateTime: '2022-02-17T19:24:00 00:00', High: 2898.7, Low: 2892.2, Open: 2897.7, …}
17: {Close: 2903.2, DateTime: '2022-02-17T19:25:00 00:00', High: 2904, Low: 2894.9, Open: 2896.7, …}
18: {Close: 2902.1, DateTime: '2022-02-17T19:26:00 00:00', High: 2904.2, Low: 2901.4, Open: 2903.2, …}
19: {Close: 2902, DateTime: '2022-02-17T19:27:00 00:00', High: 2904.1, Low: 2900, Open: 2902.1, …}

component.html:

  <thead>
      <tr>
        <th *ngFor="let key of tabKey">{{key}}</th>
      </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of df_array">{{row}}
      <td *ngFor="let key of tabKey; let j = index">{{df_array[j]}}</td>

    </tr>
  </tbody>

Here I assign the values for tabKey and tabVal:

Initdf() {
    this.restService.postTickerGetDf().subscribe((response) => {
      this.df_array = response;
      this.df_array.forEach((element:any) => {
          this.tabKey = Object.keys(element); 
          this.tabVal.push(Object.values(element));
      });
    });

Unfortunately my dataframe on the page looks like this:

Close   DateTime    High    Low Open    volume
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]
[object Object] [object Object] [object Object] [object Object] [object Object] [object Object] [object Object]

Why are there no values and how to fix this?

UPDATE:

this is the interface DfInit:

export interface DfInit {
    DateTime: string;
    Close: number;
    High: number;
    Low: number;
    Open: number;
    volume: number;
      
}

df_array type:

df_array: DfInit[] = [];

CodePudding user response：

Why are you displaying {{row}}. Also, you need to tell the object which property you are trying to display {df_array[j]}} is just setting the index, but you also have to use the key that you fetch to show its value i.e. { key value } pair Also, I think the index should be used from the outer loop, so that index is only used to fetch that row

Your HTML should look like this:

<thead>
  <tr>
    <th *ngFor="let key of tabKey">{{ key }}</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let row of df_array; let i = index">
    <td *ngFor="let key of tabKey">
      {{ df_array[i][key] }}
    </td>
  </tr>
</tbody>