[RxJS] Reactive programming-using Cached network data with RxJS--withlatestfrom ()

So, we want to replace one user when we click the ' X ' button.

To do, we want:

1. Get The cached network data for generating the userlist.

2. Then get a random user from the cached data.

3. Showing the user in the list.

We have the function to create suggestion User:

function Createsuggestionstream (Responsestream, Closeclickstream) {  return   responsestream . Map (Getrandomuser)    . Startwith (null)    null)}

It contains the ' Responsestream ' which contains the cached data we need.

So, the code would somehow like this:

  var close1clicks = Rx.Observable.fromEvent (closeButton1, ' click ');   = =    {return  getrandomuser (cacheddata);  });

When the closeclickstream happens, it'll fetch the cached data and send userlist to Getrandomuser () function to pick use R.

Now, we can merge the This stream with Responsestream:

function Createsuggestionstream (Responsestream, Closeclickstream) {  return  responsestream.map ( Getrandomuser)    . Startwith (null)    null))    . Merge (      Closeclickstream.withlatestfrom (responsestream,                                   = getrandomuser (cacheddata))    );}

-----------

varRefreshbutton = Document.queryselector ('. Refresh '));varCloseButton1 = Document.queryselector ('. Close1 '));varCloseButton2 = Document.queryselector ('. Close2 '));varCloseButton3 = Document.queryselector ('. Close3 '));varRefreshclickstream = Rx.Observable.fromEvent (Refreshbutton, ' click ');varClose1clicks = Rx.Observable.fromEvent (closeButton1, ' click ');varClose2clicks = Rx.Observable.fromEvent (closeButton2, ' click ');varClose3clicks = Rx.Observable.fromEvent (CloseButton3, ' click ');varStartuprequeststream = Rx.Observable.just (' https://api.github.com/users '));varRequestonrefreshstream =refreshclickstream. Map (EV= {    varRandomoffset = Math.floor (Math.random () *500); return' Https://api.github.com/users?since= ' +Randomoffset; });varRequeststream =Startuprequeststream.merge (requestonrefreshstream);varResponsestream =requeststream. FlatMap (Requesturl=Rx.Observable.fromPromise (Jquery.getjson (Requesturl))). Sharereplay (1);//Refreshclickstream:-------F------------->//requeststream:r------R------------->//Responsestream:---r-------r--------->//closeclickstream:---------------x----->//suggestion1stream:n--u---N---u---u----->functionGetrandomuser (listUsers) {returnListusers[math.floor (Math.random () *listusers.length)];}functionCreatesuggestionstream (Responsestream, closeclickstream) {returnResponsestream.map (Getrandomuser). Startwith (NULL). Merge (Refreshclickstream.map (EV=NULL). Merge (Closeclickstream.withlatestfrom (Responsestream, (Clickev, Cached Data)=Getrandomuser (Cacheddata)));}varSuggestion1stream =Createsuggestionstream (Responsestream, close1clicks);varSuggestion2stream =Createsuggestionstream (Responsestream, close2clicks);varSuggestion3stream =Createsuggestionstream (Responsestream, close3clicks);//Rendering---------------------------------------------------functionrendersuggestion (Suggesteduser, selector) {varSuggestionel =Document.queryselector (selector); if(Suggesteduser = = =NULL) {suggestionEl.style.visibility= ' hidden '; } Else{suggestionEl.style.visibility= ' Visible '; varUsernameel = Suggestionel.queryselector ('. Username ')); Usernameel.href=Suggesteduser.html_url; Usernameel.textcontent=Suggesteduser.login; varImgel = Suggestionel.queryselector (' img '); IMGEL.SRC= ""; IMGEL.SRC=Suggesteduser.avatar_url; }}suggestion1stream.subscribe (User={rendersuggestion (user,'. Suggestion1 ');}); Suggestion2stream.subscribe (User={rendersuggestion (user,'. Suggestion2 ');}); Suggestion3stream.subscribe (User={rendersuggestion (user,'. Suggestion3 ');});

[RxJS] Reactive programming-using Cached network data with RxJS--withlatestfrom ()