如何在angular中将这种json键值数据格式显示成table？

Question

我设法从后端检索到非空 json 数据，我想以 table 形式显示它，任何人都可以帮助我，如何像下面这样显示 json 数据进入 table 在 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"}
}

这是 html 代码，用于在 table

中显示 json 数据

<table id="example" class="table table-striped table-bordered" 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>

Answer 1

如果您有 JSON 格式的数据，您可以先解析数据。这会将 json 解析为 js 对象。

  const obj = JSON.parse(jsonData);

然后您可以提取要在 table 中显示的条目。

  const rows = Object.values(obj);

最后使用变量行在您的 table 中迭代。

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

请注意，如果您使用 HTTPClient 获得 json 响应并且响应类型为 json，则无需进行解析。响应将已经被解析，您可以直接将其用作 js 对象。

如何在angular中将这种json键值数据格式显示成table？

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

json

angular

angularjs