angular 2 how to return data from subscribe

by

You just can’t return the value directly because it is an async call.
An async call means it is running in the background (actually scheduled for later execution) while your code continues to execute.

You also can’t have such code in the class directly. It needs to be moved into a method or the constructor.

What you can do is not to subscribe() directly but use an operator like map() 

export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }
}

In addition, you can combine multiple .map with the same Observables as sometimes this improves code clarity and keeps things separate. Example:

validateResponse = (response) => validate(response);

parseJson = (json) => JSON.parse(json);

fetchUnits() {
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson);
}

This way an observable will be return the caller can subscribe to

export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }

    otherMethod() {
      this.someMethod().subscribe(data => this.data = data);
    }
}

The caller can also be in another class. Here it’s just for brevity.

data => this.data = data

and

res => return res.json()

are arrow functions. They are similar to normal functions. These functions are passed to subscribe(...) or map(...) to be called from the observable when data arrives from the response.
This is why data can’t be returned directly, because when someMethod() is completed, the data wasn’t received yet.

More Related Contents:

  1. How do I return the response from an Observable/http/async call in angular?
  2. Angular 7 go offline?
  3. How to add number with variable name? [duplicate]
  4. typescript anonymous object with variable based label value
  5. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  6. How do I download a file with Angular2 or greater
  7. (change) vs (ngModelChange) in angular
  8. Angular 2: How to detect changes in an array? (@input property)
  9. Angular4 – No value accessor for form control
  10. Typescript Type ‘string’ is not assignable to type
  11. Angular 2 Karma Test ‘component-name’ is not a known element
  12. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  13. How to do the chain sequence in rxjs
  14. Angular 6: How to set response type as text while making http call
  15. using external JS libraries in my angular 2 project
  16. How to implement a pseudo blocking async queue in JS/TS?
  17. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  18. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  19. Is it a good practice using Observable with async/await?
  20. Unraveling Angular 2 book, Chapter 1, Example 5
  21. Angular 2 Component @Input not working
  22. Highlight the search text – angular 2
  23. Cast int to enum strings in Typescript
  24. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  25. How to loop over object properties with ngFor in Angular
  26. Converting an image to base64 in angular 2
  27. how to define index in angular material table
  28. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  29. Property ‘catch’ does not exist on type ‘Observable’
  30. binding data to angular checkbox

Leave a Comment