How to get variables inside a RxJS subscribe() function?

Question

I'm working with angular2. Now, I'm in trouble to get a value inside subscribe(). I know it will return null. How can I return the correct value?

Here's my code. Anyone give me advice, it would be very helpful. Thank you :)

this.deliveryService.deliveryCancel(rowInfo.branchId, rowInfo.id).subscribe(
              res => {
                var data = res.json();
                this.getDeliveryList();
                this.msgs.push({ severity: 'success', summary: 'Info', detail: rowInfo.deliveryStatus });
              },
              err => {
                this.errMessage = <any>err;
                this.msgs.push({ severity: 'error', summary: 'Error', detail: this.errMessage });
              }
            );
            
            console.log(data);

deliveryCancel()

 deliveryCancel(branchId, deliveryId) {
    const headers = new Headers({
      'Content-Type': 'application/json'
    });
    return this.http.put(this.testUrl + '/admin/branches/' + branchId + '/deliveries/' + deliveryId + '/cancel', {
      headers: headers
    })
      .catch(handleError);
  }

can you clarify your question and relate it to the code you posted? — shusson, Feb 23 '17 at 05:04
Where is RXJS and where is subscribe method in your question ? — raj m, Feb 23 '17 at 05:25
check out your deliveryCancel method.. That might return the null. Post that method here too.. Please try to elaborate your question — raj m, Feb 23 '17 at 05:33
@rajm I want to use values the processed data in subscribe() outside of subscribe(). deliveryCancel mathod return correct value. — Mingyu Jeon, Feb 23 '17 at 05:38
If it returns correct value then what value it returns.. Json or anything else ? How do you confirm it returns correctly.. ? — raj m, Feb 23 '17 at 05:41
@rajm, It returns JSON data, but if I print it, it prints 'null' I think I need to know about asynchronous call like what @ echonax said. — Mingyu Jeon, Feb 23 '17 at 05:44

score 0 · Answer 1 · answered Feb 23 '17 at 05:49

0

You cannot access res.json() like that. And initialise 'data' as class variable. Try this.

data = {};

this.deliveryService.deliveryCancel(rowInfo.branchId, rowInfo.id).subscribe(
          res => {
            this.data = res['_body'];
            this.getDeliveryList();
            this.msgs.push({ severity: 'success', summary: 'Info', detail: rowInfo.deliveryStatus });
          },
          err => {
            this.errMessage = <any>err;
            this.msgs.push({ severity: 'error', summary: 'Error', detail: this.errMessage });
          }
        );

        console.log(data);

answered Feb 23 '17 at 05:49

raj m

1,863
6
21
37

What do you think the result of `console.log(data)` will be? – eko Feb 23 '17 at 06:14
@raj m, Thanks for your answer, It still prints null – Mingyu Jeon Feb 23 '17 at 08:54
console 'res' and let me know – raj m Feb 23 '17 at 08:58
@rajm, it makes an error that cannot find 'res' – Mingyu Jeon Feb 27 '17 at 01:47

score 0 · Answer 2 · answered Feb 23 '17 at 07:00

0

This is not an angular question but more a javascript question about asynchronous behaviour breaking flow of execution.

Suscribing means that on any error or success returned by deliveryCancel(), the res function or err function will be called.

Your console.log(data) is only executed once, and never part of those functions.

This is what you are after:

    this.deliveryService.deliveryCancel(rowInfo.branchId, rowInfo.id).subscribe(
      res => {
        this.data = res['_body'];
        this.getDeliveryList();
        this.msgs.push({ severity: 'success', summary: 'Info', detail: rowInfo.deliveryStatus });
console.log(data);
      },
      err => {
        this.errMessage = <any>err;
        this.msgs.push({ severity: 'error', summary: 'Error', detail: this.errMessage });
 console.log(data);
      }
    );

answered Feb 23 '17 at 07:00

Arinaud

155
6

You will have to call deliveryCancel as well. – Arinaud Feb 23 '17 at 07:10
I personnaly subscribe to observables in ngAfterViewInit – Arinaud Feb 23 '17 at 07:10
Thanks for the reply! However, it's not what I want to know. I wanted to know how to use 'data' outside subscribe() – Mingyu Jeon Feb 23 '17 at 08:44
You said 'It returns JSON data, but if I print it, it prints 'null' ' in a comment, giving the impression that the call is successful. Console.log will let you know the outcome of your call. Please confirm it is an Object and not 'undefined'. Once this.data has been assigned you can simply access it in your template following [this method](https://angular.io/docs/ts/latest/guide/displaying-data.html), or in the component in any function/getter using this.data. I repeat, that will ONLY be available after subscribe instruction execution and after deliveryCancel has been called. – Arinaud Feb 23 '17 at 09:34

How to get variables inside a RxJS subscribe() function?

2 Answers2