How to display a nested json in Angular 8

Question

Can someone tell me how to output a nested Json in Angular?

Here's my code:

My 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
      },
      ]
      }
      }

My service:

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

My function:

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

I would like to access to act_bilanz-result and output the content. — user10114552
– user10114552, Commented Mar 2, 2020 at 13:08

ahmeticat · Accepted Answer · 2020-03-02 13:06:04Z

1

You can set your response to an array like that

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);
        } 
     });
}

answered Mar 2, 2020 at 13:06

ahmeticat

1,9391 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StepUp · Accepted Answer · 2020-03-02 13:06:12Z

1

You need to declare a variable which stores a response:

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>

answered Mar 2, 2020 at 13:06

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

6 Comments

user10114552 Over a year ago

Can this example also be used in mat-table?

StepUp Over a year ago

@anyanx yeah, sure, it can be used

user10114552 Over a year ago

When I call act_bilanz-result, the IDE tells me that he cannot find result... What is the best way to handle this?

StepUp Over a year ago

@anyanx could you create a stackblitz example?

user10114552 Over a year ago

Here is my component, I would like to output the content of act_bwa-result to my mat-table stackblitz.com/edit/…

|

user10114552 · Accepted Answer · 2020-03-05 10:37:46Z

I solved the problem.

Here's my solution:

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)...;

I have a new problem now. When I run the application, the error message appears

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)

How can I solve the problem?

Collectives™ on Stack Overflow

How to display a nested json in Angular 8

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related