Как отобразить вложенный json в Angular 8

Question

Может кто-нибудь сказать мне, как вывести вложенный Json в Angular?

Вот мой код:

Мой Json:

{
      "success": true,
      "act_bilanz": {
      "act_bilanz-result": [
      {
      "period": 7.0,
      "amount": 0.05516859,
      "name": "A. I. 1. EDV-Software",
      "mandantKagId": 660.0,
      "db-nr": 102000.0
      },
      ]
      }
      }

Мой сервис:

 // Get all data for actBalance
  getAllActBalanceData(context: string): Observable<any> {
    const url = `/act_balance?context=${context}`;
    return this.http.get<any>(`${environment.baseUrl}` + url);
  }

Мой сервис:

 private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        const data = resp.act_bilanz;
});
}

Answer 1

Вам необходимо объявить переменную, в которой хранится ответ:

TypeScript:

act_bilanz;

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        this.act_bilanz = resp.act_bilanz;
});

HTML:

<li *ngFor="let act_bilanz of act_bilanz.act_bilanz-result;">
    {{ act_bilanz | json}}
</li>

Answer 2

Вы можете установить свой ответ на такой массив

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe(
      (resp: any) => {
        const data = resp.act_bilanz;
        let act_bilanzes = resp.act_bilanz-result;
        foreach(item in act_bilanzes){
             console.log(item);
        } 
     });
}

Answer 3

Я решил проблему.

Вот мое решение:

private loadData() {
    const yearString = this.year ? `${this.year}` : `${new Date().getFullYear()}`;
    this.actBalanceService.getAllActBalanceData(yearString).subscribe (
      (resp: any) => {
        const data = resp.act_bilanz['act_bilanz-result'].map((obj) => obj.data);
        if (null !== data && data) {
          const rows = [];
          const kagData = [];
          const kags = data.map((d) => d.kagNumber)...;

У меня теперь новая проблема. Когда я запускаю приложение, появляется сообщение об ошибке

ERROR TypeError: The 'kagNumber' property of undefined cannot be read
at act-balance-content.component.ts: 169
at Array.map (<anonym>)
at SafeSubscriber._next (act-balance-content.component.ts: 169)
at SafeSubscriber .__ tryOrUnsub (Subscriber.js: 185)
at SafeSubscriber.next (Subscriber.js: 124)
at Subscriber._next (Subscriber.js: 72)
at Subscriber.next (Subscriber.js: 49)
at MapSubscriber._next (map.js: 35)
at MapSubscriber.next (Subscriber.js: 49)
at FilterSubscriber._next (filter.js: 33)

Как я могу решить проблему?