Angular Looping Observable Result

This is how to loop through a result set returned from an observable. The API in this example is from the Financial Modeling Site. This will call the API and put specific data into two arrays to be used to generate a chart. This is a very useful piece of code for getting specific data from an API call.

Call the API for historical stock information. The following code is from the service file.

  getStockPriceHistory(ticker: string, dataSeriesType: string, fromDate: string, toDate: string) {        
    return this.http.get<StockPriceResult>(`${this.shared.baseFinancialURL}/api/v3/historical-price-full/${ticker}?serietype=${dataSeriesType}&from=${fromDate}&to=${toDate}`);
  }

In the component call the service function getStockPriceHistory() and loop through the data.

JSON Data Returned – Partial

historical: Array(76)
  0:
    close: 132.22
    date: 2020-03-20

    this.obsSubscribe = this.financeAPI.getStockPriceHistory('AAPL', 'line', fromDate, today)
        .subscribe((data) => {
        this.stockHistoryArr = data;
        this.stockHistoryArr.historical.forEach(element => {            
          const record = {
              price : element.close,
              date : element.date,
          };
          this.lineChartLabelArr.push(record.date);
          this.lineChartDataArr.push(record.price);
      });
    this.lineChartDataArr = [{ data: this.lineChartDataArr, label: 'AAPL Price History' }];
    },
    (err: HttpErrorResponse) => {
      console.log(err);
    });

  this.stockHistoryArr.historical.forEach(element => { /* Code Here */ });