Easily Amp up Your Angular app with RxJS Observables Catch and Map

Submitted over 1 year Ago

Share This Post

Why and How to Include RxJS Observables in Your Angular application

​When I was building an Angular app that lets you search for developers using their city and programming language, I included some RxJS Observables. This library has some powerful public methods. They seemed pretty interesting so I dug in deeper and here are some things I learned. You can see code examples of how to implement the Catch and Map methods towards the bottom of this post.

​First of all the basics. What is RxJS and why would you use it? ​

Basics

From the official website:

"The ReactiveX library for JavaScript. ​RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.​​"

​Others have explained this in context pretty well here are some takes on it:

"... is a library for transforming, composing, and querying streams of data. We mean all kinds of data too, from simple arrays of values, to series of events (unfortunate or otherwise), to complex flows of data.​" (from https://rxjs.codeplex.com/​) ​ ​"... is a library for working with asynchronous operations, with special emphasis on multi-valued operations. The library gives the developer a common "language" they can use to write functional code to manipulate asynchronous streams no matter the stream source. The same "language" works with any combination of UI events, timer events, object mutation observations, animation, frames, ajax calls, websocket messages, webworker messages, promises, etc​." (from Brandon on StackOverflow)

​Also note: "... uses chaining a lot, which is a popular technique also used in other libraries such as jQuery. A guide to method chaining (in the context of Ruby) is available on SitePoint."

​Anecdotally I read that using Observables is a hot new thing, and I've also read that some are skeptical. Rather than get into that back and forth let's stick with the facts ... ​

Official Documentation

​The official doc is here I have found it to be pretty good. ​

Angular with RxJS Examples

If you have chosen to write your Javascript application using the Angular framework, you can easily work that right into your application.

​As I mentioned, I leveraged RxJS Observables when I was building a search application. My application hits the GitHub API to find developers based on your chosen city and programming language. The Map method was used to convert the response object into a JSON object. The Catch method is then used for error handling, based on that reponse object conversion.

​First of all you import the Observable and the specific operators from the RxJS library into your ts file:

src/app/search-users.service.ts

... 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map';​ 
...

​Then you add them into where you are getting the user information by name, place and language:

src/app/search-users.service.ts

...   ​
getUsersByPlaceAndLanguage(place: string, language: string) {     
  let url;     
  if (place && !language) {       
    url = ${this.searchUsersEndPoint}location:${place};     
  } else if (!place && language) {       
    url = ${this.searchUsersEndPoint}language:${language};     
  } else {       
    url = ${this.searchUsersEndPoint}location:${place}+language:${language};
  }       

  return this.http.get(url)       
    .map(this.extractData)       
    .catch(this.handleError);   
}     

getDetailsByUserName(username: string) {     
  if (username) {       
    let url = ${this.getUserDetailsEndPoint}${username};       
    return this.http.get(url)         
      .map((res: Response) => res.json())         
      .catch(this.handleError);     
  }   
}​ 
...

​Of course there were some steps before and after this for the overall application. You can see the application using these Catch and Map methods live here. The full code is open sourced on GitHub here, although note it may be refactored by the time you read this.

Share This Post

Like this post? Star it on GitHub

Star It

See All Blog Posts