JSON from API call does not show in HTML part

Question

Hello fellow Programmer,

we have an component which loads after clicking on a link, this components content depends on the the link its got clicked. For Example we click on the Link and load a JSON from an API which contain the Data, this Data is shown on our HTML template.

So far we have an succesfull API call which gets us the JSON and we bind it on an var which is conected to the HTML by {{var}}, but it wont display the JSON at all.

We are pretty sure it is a problem with the asynchron call from the API to get the Data, but we have no idea how to fix this.

component.service.ts with the getVoucher() method

getVoucher() {

  let voucherUrl = 'xxx';  // URL to web api
  let headers = new Headers();
  headers.append('Content-Type', 'application/json;charset=UTF-8');
  headers.append('Authorization', 'Basic '+btoa("xxx"));

  let options = new RequestOptions({ headers: headers });
  return this.http.get(voucherUrl,options).map(response => response.json());

}

component.ts

private gutschein;
private strGutschein;

ngOnInit(): void {

    this.voucherService.getVoucher().subscribe(data => {
        this.gutschein = data;
        console.log(this.gutschein);
    });

    setTimeout(() => console.log(this.gutschein), 2000); 
    //console.log(this.gutschein);
    this.strGutschein = JSON.stringify(this.gutschein);
}

and the HTML Part component.html

{{strGutschein}}

Your questions logic is the same as the last one. You need to assign strGutschein inside the subscribe. — eko
– eko, Commented Apr 5, 2017 at 10:27
set this.strGutschein = JSON.stringify(this.gutschein); in subscribe..it is asynchronous — Suraj Rao
– Suraj Rao, Commented Apr 5, 2017 at 10:28
@echonax its not, last time i asked for the Problem itself with the console Output. — sHamann
– sHamann, Commented Apr 5, 2017 at 10:29
@sHamann this.gutschein is undefined by the time you make the assignment. getVoucher is async as suraj said. That was the reason why your console.log was printing undefined. It is the same problem. — eko
– eko, Commented Apr 5, 2017 at 10:30

Amit kumar · Accepted Answer · 2017-04-05 10:43:35Z

1

your component code should be like this

private gutschein;
private strGutschein;

ngOnInit(): void {

    this.voucherService.getVoucher().subscribe(data => {
        this.gutschein = data;
        console.log(this.gutschein);
        this.strGutschein = JSON.stringify(this.gutschein);
        console.log(this.strGutschein);
    });
    setTimeout(() => console.log(this.gutschein), 2000);     
}

and in html part use

{{ strGutschein | json }}

answered Apr 5, 2017 at 10:43

Amit kumar

6,1676 gold badges32 silver badges40 bronze badges

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

11 Comments

eko Over a year ago

We are trying to teach OP how async behaviour works. If you check OPs other question you will see the logic is the same. Won't you consider it as a duplicate? And why are you using json pipe on a string?

sHamann Over a year ago

@echonax Actually i understood how async works, but i couldnt find a solution, anyway the idea of Amit worked fine. may you guys can tell me which would be better to use in my case, the subsricbe method or use an promise ?

eko Over a year ago

@sHamann suraj already told you to do the assignment inside the subscribe in the comments. And in the link that I've given it says to do the async operations inside the subscribe callback. I still don't think you understood how async operations work. What do you mean by using a promise? You already subscribe to an observable which is an abstracted promise.

Amit kumar Over a year ago

@echonax in this question he is saying he is not able to see JSON which he got from api response and you can not see json directly in html

eko Over a year ago

@AmitSuhag this.gutschein is a json strGutschein is a string. Because this.strGutschein = JSON.stringify(this.gutschein);. The output of JSON.stringify is a string my friend.

|

Collectives™ on Stack Overflow

JSON from API call does not show in HTML part

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest