how to render angular2 html page after rest webservice response comes

Question

I can get rest webservice response and console it in screen without any problem. But unfortunately, in the page I can see initial value of the result of the werbservice call. What I need to do render the page after I get response from wbservice? I meant I can see userInfo and userName's initial values. You can see the snippet below.

Regards Alper

  export class NavigationComponent implements OnInit {
response:any;
errorMessage:any;
form:FormGroup;
obj = {"one": "", "two": "", "three": "", "four": ""};
webserviceUrl = "https://httpbin.org/post";
webServiceUrlGet = "https://jsonplaceholder.typicode.com/posts/1";
username = "alper"
userInfo = "alper Info";
componentName =  'AppComponent';

ngOnInit():void {
  this.getUserName();
}

 getUserName() {

this.http.get(this.webServiceUrlGet)
  .subscribe(
    function (data) {
      this.userInfo = data.json();
      this.username = this.userInfo.userId;


    },
    error => this.errorMessage = <any>error);
return this.username;
}

I don't really understand what "render the page after I get response from wbservice" means. Please have a look at my answer. But I have doubts this is the whole story. — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 20, 2017 at 13:56
your answer is correct. I was using subscribe in a wrong way.Regards — Tonyukuk
– Tonyukuk, Commented Mar 20, 2017 at 14:02

Günter Zöchbauer · Accepted Answer · 2017-03-20 13:55:46Z

7

This won't work

.subscribe(
  function (data)

It should be instead

.subscribe(
  (data) =>

for this to work inside the callback.

To only render the template when the response arrived you can for example use

<ng-container *ngIf="userInfo">
  <!-- actual template content here -->
</ng-container>

answered Mar 20, 2017 at 13:55

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

Tonyukuk Over a year ago

Thank you Günter.

birwin · Accepted Answer · 2017-03-20 14:14:52Z

I agree with the suggestion above to use fat arrows. An alternative may be to enclose 'this' in your closure as so:

export class NavigationComponent implements OnInit {
    response:any;
    errorMessage:any;
    form:FormGroup;
    obj = {"one": "", "two": "", "three": "", "four": ""};
    webserviceUrl = "https://httpbin.org/post";
    webServiceUrlGet = "https://jsonplaceholder.typicode.com/posts/1";
    username = "alper"
    userInfo = "alper Info";
    componentName =  'AppComponent';

    ngOnInit():void {
        this.getUserName();
    }

    getUserName() {
        let that = this;
        this.http.get(this.webServiceUrlGet)
        .subscribe(
            function (data) {
                that.userInfo = data.json();
                that.username = that.userInfo.userId;
            },
        error => that.errorMessage = <any>error);
        return that.username; // Return statement not necessary
    }
}

Collectives™ on Stack Overflow

how to render angular2 html page after rest webservice response comes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related