How to show this json key value data format into table in angular?-CodePudding

i managed to retrieve non-null json data from backend and i want to display this in table form, can anyone help me, how to display json data like below into table in angular?

{"2020-12-17": 
   {"tanggal": "2020-12-17", "kurs_jual": "10781.030615606935", "kurs_beli": "10673.605766653045"}, 
"2020-12-18": 
   {"tanggal": "2020-12-18", "kurs_jual": "10790.980751228397", "kurs_beli": "10682.253685484742"}
}

this is the html code to display the json data in the table

<table id="example"  style="width:100%">
  <thead>
  <tr>
    <th>Date</th>
    <th>Sell</th>
    <th>Buy</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="forecast_table let data">
    <td>{{data['tanggal'].tanggal}}</td>
    <td>{{data['tanggal'].kurs_jual}}</td>
    <td>{{data['tanggal'].kurs_beli}}</td>
  </tr>
  </tbody>
</table>

CodePudding user response：

If you have the data in JSON format you could parse the data first. This will parse the json to a js Object.

  const obj = JSON.parse(jsonData);

Then you could extract the entries that you want to display in your table.

  const rows = Object.values(obj);

Finally use the variable rows to iterate in your table.

    <tr *ngFor="let data of rows">
      <td>{{data.tanggal}}</td>
      <td>{{data.kurs_jual}}</td>
      <td>{{data.kurs_beli}}</td>
    </tr>

Note that if you got the json response with HTTPClient and the responseType is json, you dont need to do the parsing. The response will be already parsed and you could use it directly as a js Object.