How to load json api data to html template in angular?

Question

Can anyone help me with a simple question(I guess). I'm trying to display a json file in a table through Django into an Angular front end app. I can view the data by console logging it, however I can't seem to get the data into the webpage.

I know how to display the table in HTML. The specific problem is that the object which is fetched from the API does not appear in the HTML.

component.ts

import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, 

ViewEncapsulation } from '@angular/core';
import  ApexChart  from 'apexcharts'
import { ApexOptions } from 'ng-apexcharts';
import { FinanceService } from 'app/modules/admin/dashboards/finance/finance.service';

@Component({
  selector: 'app-finance',
  templateUrl: './finance.component.html',
  styleUrls: ['./finance.component.scss'],
  encapsulation  : ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class FinanceComponent implements OnInit {

    _stockData: any;
    _portData: any;
    _effData: any;
    _calData: any;
    _labels: any;
    _table: any;

    constructor(
        private _financeService: FinanceService,
    ){
    }

    ngOnInit(): void {
        this._financeService.getFinanceData()
        .subscribe((res: any) => {
            console.log(res);
            this._stockData = res.stocks;
            this._portData = res.port;
            this._effData = res.eff;
            this._calData = res.cal;
            this._labels = res.labels;
            this._table = res.table;
            console.log(res.table);
            this._prepareChartData();
        },
        
        (response) => {

            // Re-enable the form
        });
    }

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, switchMap } from 'rxjs/operators';
import { BehaviorSubject, of, Observable } from 'rxjs';
import { environment } from 'environments/environment';

@Injectable({
  providedIn: 'root'
})
export class FinanceService {

    /**
     * Constructor
     * @param {HttpClient} _httpClient
     */
    constructor(private _httpClient: HttpClient){
        
    }
    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------

    /**
     * get Finance Data
     */
    getFinanceData(): Observable<any>{
        return this._httpClient.get(environment.baseURL + 'apiurls/', {}).pipe(
            switchMap((response: any) => {
                return of(response);
            })
        );
    }
}

template.html

                <div>
                    <p>{{_table.Percentage}}</p>
                </div>

json (as presented by the django API)

{
   "stocks":[],
   "eff":[],
   "port":[],
   "cal":[],
   "labels":[],
   "table":{
      "Percentage":{
         "AD.AS":16.1,
         "ASML.AS":15.67,
         "AAPL":68.23
      },
      "Budget":{
         "AD.AS":241.5,
         "ASML.AS":235.05,
         "AAPL":1023.45
      },
      "Closing":{
         "AD.AS":25.22,
         "ASML.AS":314.3,
         "AAPL":129.04
      },
      "Number of stocks to buy":{
         "AD.AS":10.0,
         "ASML.AS":1.0,
         "AAPL":8.0
      },
      "final":{
         "AD.AS":252.0,
         "ASML.AS":314.0,
         "AAPL":1032.0
      },
      "final allocation":{
         "AD.AS":15.77,
         "ASML.AS":19.65,
         "AAPL":64.58
      },
      "Diff":{
         "AD.AS":-0.33,
         "ASML.AS":3.98,
         "AAPL":-3.65
      }
   }
}

Answer 1

To display the json data on html you may use json pipe

<pre>
 {{ _table.Percentage | json }}
</pre>