CODEWITHSUNDEEP
javascriptarraysjsonangularnested
user2880072
user2880072

Reputation:

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

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>

Upvotes: 0

Views: 1737

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

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

Upvotes: 0

Related Questions