How to return value from function which has Observable subscription inside

Question

I dont know how to extract value from Observable to be returned by function in which Observable is present  I need just a value from it to be returned  nothing else   Current version which works  function getValueFromObservable         this store subscribe           data any    gt                console log data                    getValueFromObservable     I need this to work  function to return value  and then   function getValueFromObservable         this store subscribe           data any    gt                return data                   console log getValueFromObservable      What am I doing wrong here

User · Answer

While the previous answers may work in a fashion, I think that using BehaviorSubject is the correct way if you want to continue using observables.

Example:

    this.store.subscribe(
        (data:any) => {
            myService.myBehaviorSubject.next(data)
        }
    )

In the Service:

let myBehaviorSubject = new BehaviorSubjet(value);

In component.ts:

this.myService.myBehaviorSubject.subscribe(data => this.myData = data)

I hope this helps!

User · Answer

For example this is my html template     lt select class  custom-select d-block w-100  id  genre  name  genre                      ngModel    film genre                     genreInput  ngModel                    required gt               lt option value    gt Choose    lt  option gt               lt option  ngFor  let genre of genres    value   genre value  gt   genre name   lt  option gt             lt  select gt    This is the field that binded with template from my Component        Genres of films like action or drama that will populate dropdown list    genres  Genre      I fetch genres of films from server dynamically  In order do communicate with server I have created FilmService  This is the method which communicate server    fetchGenres    Observable lt Genre   gt        return this client get WebUtils RESOURCE HOST API    film      genre   as Observable lt Genre   gt         Why this method returns Observable lt Genre   gt  not something like Genre     JavaScript is async and it does not wait for a method to return value after an expensive process  With expensive I mean a process that take a time to return value  Like fetching data from server  So you have to return reference of Observable and subscribe it   For example in my Component    ngOnInit         this filmService fetchGenres   subscribe        val   gt  this genres   val

User · Answer

The decent way would be to return the observable from a function and subscribe to it wherever required  because observables are lazy  they will start emitting values only when they are subscribed   Here I have one more interesting event driven solution  which I initially used to play around with  Following example does this by using  events  module of nodejs  You can use it with other frameworks where similar module exists Note  Syntax and style might change depending on module used    var from  require  rxjs   from  var map   require  rxjs operators   map  var EventEmitter   require  events     function process event        from  1 2 3   pipe          map val   gt   The number is     val          subscribe  data    gt           event emit  Event1   data     emit value received in subscribe to the  Event1  listener            function main        class Emitter extends EventEmitter        var event   new Emitter      creating an event     event on  Event1    data   gt     listening to the event of name  Event1  and callback to log returned result         console log data     here log  print  play with the data you receive             process event     pass the event to the function which returns observable     main      invoke main function   It is just an example to showcase an idea where we can pass data from different places by method of emitting and listening  This is also known as event-driven code

User · Answer

The problem is that data is captured inside the observable and I can just console log it  I want to return that value and console log or whatever from different file by calling the function in which it resides    Looks like you are looking for a  current value  getter inside an observable  when it emits and after an emission   Subject and Observable doesn t have such a thing  When a value is emitted  it is passed to its subscribers and the Observable is done with it    You may use BehaviorSubject which stores the last emitted value and emits it immediately to new subscribers   It also has a getValue   method to get the current value   Further Reading   RxJS BehaviorSubject  How to get current value of RxJS Subject or Observable

User · Answer

In the single-threaded asynchronous promise-oriented reactive-trending world of javascript async await is the imperative-style programmer s best friend    async    gt        const store   of  someValue        function getValueFromObservable              return store toPromise              console log await getValueFromObservable             And in case store is a sequence of multiple values     const aiFrom   require  ix asynciterable   from     async function           const store   from   someValue   someOtherValue          function getValuesFromObservable              return aiFrom store               for await  let num of getValuesFromObservable             console log num

User · Answer

function getValueFromObservable         this store subscribe           data any    gt                return data                   console log getValueFromObservable      In above case console log runs before the promise is resolved so no value is displayed  change it to following  function getValueFromObservable         return this store    getValueFromObservable     subscribe  data  any    gt           do something here with data     console log data         other solution is when you need data inside getValueFromObservable to return the observable using of operator and subscribe to the function    function getValueFromObservable             return this store subscribe  data  any    gt                   do something with data here             console log data                 return again observable              return of data                        getValueFromObservable         subscribe  data  any    gt               do something here with data         console log data

User · Answer

If you want to pre-subscribe to the same Observable which will be returned  just use       do      function getValueFromObservable         return this store do           data any    gt                console log  Line 1     data                       getValueFromObservable   subscribe           data any    gt                console log  Line 2     data

User · Answer

EDIT  updated code in order to reflect changes made to the way pipes work in more recent versions of RXJS  All operators  take in my example  are now wrapped into the pipe   operator  I realize that this Question was quite a while ago and you surely have a proper solution by now  but for anyone looking for this I would suggest solving it with a Promise to keep the async pattern  A more verbose version would be creating a new Promise  function getValueFromObservable         return new Promise resolve  gt           this store pipe             take 1    useful if you need the data once and don t want to manually cancel the subscription again                      subscribe               data any    gt                    console log data                   resolve data                         On the receiving end you will then have  quot wait quot  for the promise to resolve with something like this  getValueFromObservable       then  data any   gt            continue with anything depending on  quot data quot  after the Promise has resolved     A slimmer solution would be using RxJS   toPromise   instead  function getValueFromObservable         return this store pipe take 1           toPromise         The receiving side stays the same as above of course

User · Answer

This is not exactly correct idea of using Observable  In the component you have to declare class member which will hold an object  something you are going to use in your component   export class MyComponent     name  string           Then a Service will be returning you an Observable   getValueFromObservable   Observable lt string gt        return this store map res   gt  res json         Component should prepare itself to be able to retrieve a value from it   OnInit      this yourServiceName getValueFromObservable        subscribe res   gt  this name   res name      You have to assign a value from an Observable to a variable   And your template will be consuming variable name    lt div gt     name     lt  div gt    Another way of using Observable is through async pipe http   briantroncone com  p 623  Note  If it s not what you are asking  please update your question with more details

User · Answer

Observable values can be retrieved from any locations  The source sequence is first pushed onto a special observer that is able to emit elsewhere  This is achieved with the Subject class from the Reactive Extensions  RxJS    var subject   new Rx AsyncSubject        store-last-value method   Store value onto the observer   subject next value      store value subject complete       publish only when sequence is completed   To retrieve the value from elsewhere  subscribe to the observer like so   subject subscribe     next   response    gt            do stuff  The property name  response  references the value           Subjects are both Observables and Observers  There are other Subject types such as BehaviourSubject and ReplaySubject for other usage scenarios     Don t forget to import RxJS   var Rx   require  rxjs

[typescript] How to return value from function which has Observable subscription inside?

Examples related to typescript

Examples related to angular

Examples related to rxjs

Examples related to rxjs5