CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic4
Calvin Seng
Calvin Seng

Reputation: 193

Unable to show value in Template

I have successfully retrieved the JSON data but I don't seem to find a way to output the value as I would be able to for others. Wonder what went wrong in the way to display the value in my template?

The function is as follows,

getUserInfo() {
    var service = this;
    let url = service.appConfig.Shop_URL + "/wp-json/wp/v2/users/" + service.userService.id;
    url = this.initUrl(url, '');
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + service.userService.token);
    headers.append('Content-Type', 'application/json');
    return new Promise(function (resolve, reject) {
      service.http.get(url, { headers: headers }).pipe(map(res => res.json())).subscribe(data => {
        if (data) {
          service.cachedData = data;
          console.log(data);
          resolve(service.cachedData);
        }
        else {
          reject();
        }
      });

    });
  }

  listUserDetails() {
      this.getUserInfo().then((data: Array<any>) => {
        this.user_details = data;
        console.log(this.user_details);
      });
  }

In the console the data shows as follows,

{id: 584, name: "test", url: "", description: "", link: "https://oc.xxxxx.com/author/test/", …}
avatar_urls: {24: "https://secure.gravatar.com/avatar/b642b4xxx", 48: "https://secure.gravatar.com/avatar/b642b4xxx", 96: "https://secure.gravatar.com/avatar/b642bxxxx"}
commission_earned: "36"
commission_rate: "5"
daily_sales: "720"
description: ""
id: 584
link: "https://oc.xxxxx.com/author/test/"
meta: []
name: "test"
slug: "test"
url: ""

And in my template I used the following method but it is not returning the values.

<span *ngFor="let detail of user_details">{{detail.daily_sales}}</span>

thanks in advance.

Upvotes: 0

Views: 51

Answers (1)

MikNiller
MikNiller

Reputation: 1280

You proberly just need to handle the user_details like an object not an array

so change

<span *ngFor="let detail of user_details">{{detail.daily_sales}}</span>

to

<span >{{user_details.daily_sales}}</span>

More info on *ngFor here : https://angular.io/api/common/NgForOf

Upvotes: 1

Related Questions