How to display nested JSON objects with a changing string in Angular 6

Question

Got a very hard problem to solve and no clue how to tackle it. I'm coding in Angular 6.

To my problem, this is my JSON file. I can easily access data like "id" or "certificate. But I want to display the nested remainingCounts which are left on the ticket and here comes the next problem: the ID before the number of the remainingCounts always matches to the appointmentTypeIDs. How can I tell my Angular Frontend to display always all data icluded in the remainingCounts array?

[
   {
      "id":9073111,
      "certificate":"A4245322",
      "productID":425193,
      "appointmentTypeIDs":[
         5780379
      ],
      "remainingCounts":{
         "5780379":10
      }
   },
   {
      "id":9073113,
      "certificate":"0BE0C148",
      "productID":435370,
      "appointmentTypeIDs":[
         5780416
      ],
      "remainingCounts":{
         "5780416":50
      }
   },
   {
      "id":9073115,
      "certificate":"E72984C2",
      "productID":435376,
      "appointmentTypeIDs":[
         5780421
      ],
      "remainingCounts":{
         "5780421":100
      }
   }
]

My certificate.ts:

export class CertificatesComponent implements OnInit {
  private certificates: Array<object> = [];
  pageTitle = 'Meine Zertifikate';
  email = this.auth.userProfile.name;

  constructor(
    private title: Title,
    private apiService: APIService,
    public auth: AuthService
  ) {}

  ngOnInit() {
    this.title.setTitle(this.pageTitle);
    this.getData();
  }

  public getData() {
    this.apiService
      .getCertificatesByUser(this.email)
      .subscribe((data: Array<object>) => {
        this.certificates = data;
        console.log(data);
      });
  }
}

Any my HTML template:

<div class="ui cards" *ngFor="let certificate of this.certificates">
      <div class="card">
        <div class="content">
          <div class="header">{{certificate.name}}</div>
          <div class="meta">{{certificate.email}}</div>
          <div class="description">
            Verbleibende Termine Ihrer {{certificate.name}}-Karte:
            <span *ngFor="let remainingCount of certificates.remainingCounts">
              {{remainingCount}}
            </span>
          </div>
        </div>
        <sui-progress class="bottom attached indicating active" [value]="80"></sui-progress>
      </div>
    </div>

Sajeetharan · Accepted Answer · 2018-11-18 14:18:30Z

0

First of all remainingCounts is not an array as per the JSON data you've provided. It's just another object.

You could just display using dot(.) Operator as you do it for other properties without ngFor

<div class="ui cards" *ngFor="let certificate of this.certificates"> <div class="card"> <div class="content"> <div class="header">{{certificate.name}}</div> <div class="meta">{{certificate.email}}</div> <div class="description"> Verbleibende Termine Ihrer {{certificate.name}}-Karte:  {{certificate.remainingCount}}  </div> </div> <sui-progress class="bottom attached indicating active" [value]="80"></sui-progress> </div> </div>

STACKBLITZ DEMO

edited Nov 18, 2018 at 14:18

answered Nov 18, 2018 at 0:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

8 Comments

user2880072 Over a year ago

this results in a [object Object] on my template. :/

Sajeetharan Over a year ago

Yes because it's an object, if you need to display whole object use |Jon pipe as {{certificate.remainingCounts | json}}

user2880072 Over a year ago

thanks my man. can you give me any approach how to visualize the the remainingCounts object in a more beautiful way? will try to solve the rest...

Sajeetharan Over a year ago

what do you mean by more beautiful way

user2880072 Over a year ago

It is display like this: { "5780379": 1 } - is there a way to remove the curly brackets and only display the number after the ID, like {{certificate.remainingCounts.5780379}}? But this doesn't work.

|

Collectives™ on Stack Overflow

How to display nested JSON objects with a changing string in Angular 6

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related