CODEWITHSUNDEEP
jsonangularhttpclient
user10114552
user10114552

Reputation:

How to display a nested json in Angular 8

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

Upvotes: 0

Views: 702

Answers (3)

user10114552
user10114552

Reputation:

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?

Upvotes: 0

StepUp
StepUp

Reputation: 38199

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>

Upvotes: 1

ahmeticat
ahmeticat

Reputation: 1939

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

Upvotes: 1

Related Questions