The Open Movie Database(OMDb) for fetching movie data

Make your own portal for the Internet Movie Database(IMDB)/OMDB

Angular application to fetch movie data from IMDb

While IMDb is the authoritative source of all movie information, they don’t have a public API. So to retrieve movie information we can use open databases on movies, such as the Open Movie Database (OMDB). This article is about making your own portal for the OMDb. OMDB API is a RESTful web service to retrieve movie or series information (title, plot, actors, year, poster, etc). Let's test knowledge by implementing an application to fetch remote server responses using a third-party API. Use HttpClientModule of Angular to make HTTP calls and use the RxJS library to control server API hits a user makes while communicating with the server limiting the network resources.

Getting started with Angular

First set up angular CLI by running npm command as follows,

$ npm install -g @angular/cli

Then create an Angular project by executing ng command as follows in the latest version of angular. The example project was generated with Angular CLI version 12.0.2.

$ ng new potal
$ cd potal

Get data from OMDB API web service

First, get your OMDb API key. For that, You have to sign up from their website. If you haven’t already, sign up for an account at http://www.omdbapi.com/apikey.aspx. You’ll be sent a verification link containing your API key. Click the link to activate it. That’s it! You now have access to the OMDb API.

Next, Create your OMDb/IMDb API request URL. We can follow the OMDb API documentation to search for information about movies. Putting API root and query string together we can get the full API request URL.

http://www.omdbapi.com/?apikey=[YOUR_KEY]&

Just substituting in your own API key you can search string.

For each JSON item, the API returns:

• Title
• Release Year
• IMDb ID
• Type (movie, series, or episode)
• Movie Poster image

JSON response in chrome for the search string

Here the OMDb API can be consumed to fetch the top 10 results matching the search query (JSON).

Update App Component:

Replace the following HTML in the app.component.html file.

To make a search, input field control is used with a template variable #movieSearchInput to bind the keyUp event using RxJs fromEvent method. Angular *ngFor directive iterate the list of searched movies and create angular material cards for each movie."Searching..." message is shown by the isSearching boolean flag, indicating API hit progress.

Update the app.component.ts file with the following code.

@ViewChilddecorator gets reference using the template variable #movieSearchInput on the Input control of type ElementRef. The @ViewChild will have {static:true} set as we will bind event in the ngOnInit() component hook.

On Input control, keyUp event is bound using the fromEvent method of RxJS. pipe() this event is triggered using filter() to trigger event only when the length of the input value is more than 2, debounceTime() to manage time between key events before a user stops typing, distinctUntilChanged() to check whether the current input is sitting from the previously entered value, andsearchGetCall() to make the HTTP call to the server after passing all scenarios we implemented.

Get more OMDb API data

To view more details from the Internet Movie Database, make a request for a single movie, like this:

by title:http://www.omdbapi.com/?apikey=[YOUR_KEY]&t=[MOVIE_TITLE]

by IMDb ID:http://www.omdbapi.com/?apikey=YOUR_KEY&i=[IMDB_ID]

Here, The optional parameters include:

• i — IMDb ID
• t — Movie title

This endpoint will return more detailed results about an IMDb ID or a movie title you have in mind. Here I have used making a request for a movie by IMDb ID as follows.

getDetails(obj) function is added as a click function for the Details button to fetch more details about the particular movie by its IMDb ID and the selected movie is given as the function's parameter.

<button mat-raised-button color="primary" (click)="getDetails(this.movie)">Details</button>

Then make show hidden div element to show those retrieved details.

This function has a much more comprehensive result that includes:

• Title
• Release Year
• Rating
• Release Date
• Runtime
• Genre(s)
• Director(s)
• Writer(s)
• Actor(s)
• Plot Summary
• Language(s)
• Country/Countries
• Awards Won
• Movie posters (URL of film image)
• Ratings received
• Metascore
• IMDb Rating
• IMDb Votes
• IMDb ID
• Type (movie, series, or episode)
• DVD info
• Box Office results
• Production company
• Website(s)

JSON response in chrome for the request of a movie by IMDb ID

The steps of implementing OMDb-Search in Angular application can be summarized as follows:

• Consume the OMDb API to fetch the top 10 results matching your search query (JSON).
• Create an interface with one input field to be used to search for movies by title.
• Present the results in real-time and update the interface as the user types his search query.
• Displays the OMDb API error if there is no result for the search query
• Once the results are displayed allowing the user to click on any particular movie to view its details.
• For a particular movie, the details view displays more movie information.

The complete code for the application can be accessed here.

Interface for the movie portal, search for a movie, and display movie details.