TypeScript - http.get().subscribe() --> not setting variable

Question

I'm trying to create a service.ts file which will handle all of my Http requests in TypeScript (AngularJs2).

Now I do get the right response, but I cannot access the properties outside of the subscribe() function. Let me show you what I mean.

`APICaller.service.ts`:

import { Injectable, Inject } from '@angular/core';
import { Http } from '@angular/http';

import { Evenement } from './models/evenement.model';
import { Deelnemer } from './models/deelnemer.model';
import { Comment } from './models/comment.model';

@Injectable()
export class APICaller {
    http : Http
    baseUrl:string = "http://10.0.4.161:8080";

    constructor(@Inject(Http) httpService) {
        this.http = httpService;
    }

    addNewComment(deelnemerId:number, eventId:number, content:string) : Comment{
        let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        this.http.post(this.baseUrl+"/evenementen/"
        +eventId +"/deelnemers/"+deelnemerId+"/addComment"
        ,{
            user: 'developer',
            content: content
        }).subscribe((response) => {
            results = response.json();
            console.log("results id: "+ results.id);
        });

        return results;
    }
}

`component.ts`: (minimized - still needs cleaning)

import { APICaller } from '../../apicaller.service';
import { Comment } from '../../models/comment.model';

@Component({    
    templateUrl: 'build/pages/deelnemer-details/deelnemer-details.html',
    providers: [APICaller]
})

export class DeelnemerDetails {   
    public deelnemer:any;
    public http:Http;
    public eventObj;
    public newComment;
    public comments;
    public editComment:any;


    constructor(private apiCaller : APICaller, private navCtrl: NavController, navParams : NavParams,  public toastCtrl : ToastController, public alertCtrl:AlertController, @Inject(Http) httpService) {
        this.eventObj = navParams.get("event");
        this.http = httpService;
        this.newComment = "";
        this.deelnemer={};
        this.editComment={
        id: -1,
        edit: false,
        content: ""
    }

        this.getDeelnemer(navParams.get("deelnemer"));
    }

    addNewComment(){
        let test:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        console.log("deelnemer id "+this.deelnemer.id);
        console.log("eventObj id "+ this.eventObj.id);
        console.log("new comment : "+this.newComment);

        test = this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment);

        console.log("new comment id: "+ test.id);

        this.comments.push(
           test
        );
        this.newComment="";

    }

Responses and `console.log()`

So it seems like within the .subscribe() it doesn't set the value of results.

Günter Zöchbauer · Accepted Answer · 2016-09-08 08:49:58Z

3

The callback you pass to subscribe(...) is called much later when the response from the server arrives. return results; is called immediately after the call to the server was initiated.

If you change the code to

@Injectable()
export class APICaller {
    http : Http
    baseUrl:string = "http://10.0.4.161:8080";

    constructor(@Inject(Http) httpService) {
        this.http = httpService;
    }

    addNewComment(deelnemerId:number, eventId:number, content:string) : Observable<Comment>{
        let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

        return this.http.post(this.baseUrl+"/evenementen/"
        +eventId +"/deelnemers/"+deelnemerId+"/addComment"
        ,{
            user: 'developer',
            content: content
        }).map((response) => {
            console.log("results id: "+ results.id);
            return response.json();
        });
    }
}

You can get the result by calling

addNewComment(){
    let test:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    console.log("deelnemer id "+this.deelnemer.id);
    console.log("eventObj id "+ this.eventObj.id);
    console.log("new comment : "+this.newComment);

    this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment).subscribe(test => {

      console.log("new comment id: "+ test.id);

      this.comments.push(
         test
      );
      this.newComment="";
    });

   // code here (outside the callback passed to `subscribe(...)`) is again
   // executed before `result` arrives

}

Async execution is contagious and there is no way to return to sync execution once an async execution was initiated.

I changed subscribe() to map() because .map() returns an Observable which can be subscribed to by the caller. .subscribe() returns a Subscription and is worthless in this case to the caller.

edited Sep 8, 2016 at 8:49

answered Sep 8, 2016 at 8:36

Günter Zöchbauer

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

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

5 Comments

Ivafo Over a year ago

I had to edit my return to Observable<Comment> but how do I retrieve the data from the return statement? Since test has te be an Observable as well?

Günter Zöchbauer Over a year ago

Sorry, I forgot the return type. I also added more code from the call site. You need to move all code that depends on the result into the `subscribe(...)´ callback.

Günter Zöchbauer Over a year ago

The line let test:Comment = {i... confuses me. It doesn't seem to do anything.

Ivafo Over a year ago

I got a previous error that 'id' was not a property for 'undefined' so I defined it to see what was going on. Maybe could've been my REST service

Günter Zöchbauer Over a year ago

Glad to hear :) Thanks for the feedback.

Nitzan Tomer · Accepted Answer · 2016-09-08 08:55:44Z

As the http request is asynchronous you can't return the result, as it's not yet received when the return statement is reached.

You can use a callback:

addNewComment(deelnemerId: number, eventId: number, content: string, callback: (comment: Comment) => void): void {
    let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    this.http.post(`${ this.baseUrl }/evenementen/"${ eventId }/deelnemers/${ deelnemerId }/addComment`, {
        user: 'developer',
        content: content
    }).subscribe((response) => {
        console.log("results id: " + results.id);
        callback(response.json());
    });
}

And then:

this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment, (comment: Comment) => {
    console.log("new comment id: " + comment.id);

    this.comments.push(
       comment
    );

    this.newComment = "";
});

Or a promise:

addNewComment(deelnemerId:number, eventId:number, content:string): Promise<Comment> {
    let results:Comment = {id: 0, content:"", user: "", status: "", date: ""};

    this.http.post(`${ this.baseUrl }/evenementen/"${ eventId }/deelnemers/${ deelnemerId }/addComment`, {
        user: 'developer',
        content: content
    }).map((response) => {
        console.log("results id: " + results.id);
        return response.json();
    }).toPromise();
}

And then:

this.apiCaller.addNewComment(this.deelnemer.id, this.eventObj.id, this.newComment).then((comment: Comment) => {
    console.log("new comment id: " + comment.id);

    this.comments.push(
       comment
    );

    this.newComment = "";
});

Collectives™ on Stack Overflow

TypeScript - http.get().subscribe() --> not setting variable

`APICaller.service.ts`:

`component.ts`: (minimized - still needs cleaning)

Responses and `console.log()`

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

APICaller.service.ts:

component.ts: (minimized - still needs cleaning)

Responses and console.log()

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

`APICaller.service.ts`:

`component.ts`: (minimized - still needs cleaning)

Responses and `console.log()`