如何在 HTML table 中显示 JSON 在 Angular 10

Question

我试图在 Angular 10 HTML table 中显示数据，但出现此错误 Error trying to diff '[object Object]'. Only arrays and iterables are allowed。我下面有这个 JSON：

{
    "Meta Data": {
        "1. Information": "Daily Prices (open, high, low, close) and Volumes",
        "2. Symbol": "petr4.SA",
        "3. Last Refreshed": "2020-10-23",
        "4. Output Size": "Compact",
        "5. Time Zone": "US/Eastern"
    },
    "Time Series (Daily)": {
        "2020-10-23": {
            "1. open": "20.9400",
            "2. high": "21.1400",
            "3. low": "20.5400",
            "4. close": "20.5700",
            "5. volume": "61328500"
        },
        "2020-10-22": {
            "1. open": "20.1000",
            "2. high": "20.8400",
            "3. low": "20.0500",
            "4. close": "20.8400",
            "5. volume": "98359400"
        }
}

我的模型class:

export class Candle{
    date: Date;
    open: string;
    high: string;
    low: string;
    close: string;
    volume: string;
}

我的服务class:

export class CandleService {

  constructor(
    public http: HttpClient
  ) { }

  findAll(): Observable<Candle[]>{
    return this.http.get<Candle[]>(`${API_CONFIG.baseUrl}`);
  }
}

最后 HTML:

<div class="container-analyzer">
    <table>
        <thead>
          <th>Date</th>
          <th>Open</th>
          <th>High</th>
          <th>Low</th>
          <th>Close</th>
          <th>Volume</th>
        </thead>
        <tbody *ngFor="let candle of ativoData">
            <tr>
                <td>{{candle.data}}</td>
                <td>{{candle.open}}</td>
                <td>{{candle.high}}</td>
                <td>{{candle.low}}</td>
                <td>{{candle.close}}</td>
                <td>{{candle.volume}}</td>
            </tr>
        </tbody>
      </table>
</div>

Answer 1

您可以使用 Mat-Angular（material 设计组件）table（https://material.angular.io/components/table/overview）构建您的 table，而不是编写复杂的代码。您可以轻松地操作要在屏幕上显示的数据。

Answer 2

我没有看到 ativoData 被定义，即使它被定义了，它也不是数组也不是可迭代对象。

您需要获取 "Time Series (Daily)" 对象的值并将其转换为数组（您可以使用 Object.entries() 来完成此操作）并将其存储到值 ativoData 中。

然后，在您的 HTML 中的 *ngFor 中，您还需要定义索引以访问每个日期。基本上，它看起来像 *ngFor="let candle of ativoData; index as i".

最后，在使用给定索引的插值中，您可以访问如下所示的每个值：

{{candle[i]}} // this will give you the date
{{candle[i].open}} // now you can access each value of the date
{{candle[i].high}}
{{candle[i].low}}
.
.
.
so on and so forth

Answer 3

您需要一个函数将您的数据转换为数组，以便它可以显示在模板上。

像这样写一个函数

  transformData(rawData: any) {
    let processedData: Array<Candle> = [];
    Object.keys(rawData["Time Series (Daily)"] || []).forEach(key => {
      processedData.push({
        date: new Date(key),
        open: rawData["Time Series (Daily)"][key]["1. open"],
        high: rawData["Time Series (Daily)"][key]["2. high"],
        low: rawData["Time Series (Daily)"][key]["3. low"],
        close: rawData["Time Series (Daily)"][key]["4. close"],
        volume: rawData["Time Series (Daily)"][key]["5. volume"]
      });
    });
    return processedData;
  }

并在从服务接收到数据后调用它

类似

this.ativoData = this.transformData(this.rawData);

在寺庙里

<div class="container-analyzer">
    <table>
        <thead>
            <th>Date</th>
            <th>Open</th>
            <th>High</th>
            <th>Low</th>
            <th>Close</th>
            <th>Volume</th>
        </thead>
        <tbody *ngFor="let candle of ativoData">
            <tr>
                <td>{{candle.date | date}}</td>
                <td>{{candle.open}}</td>
                <td>{{candle.high}}</td>
                <td>{{candle.low}}</td>
                <td>{{candle.close}}</td>
                <td>{{candle.volume}}</td>
            </tr>
        </tbody>
    </table>
</div>

这是一个有效的 sample

如何在 HTML table 中显示 JSON 在 Angular 10

How to show JSON in HTML table on Angular 10

angular-directive

angular