Getting movie data from OMDBAPI using fetch()

Cristhian Ferreira
Sep 5, 2018 · 3 min read
“Batman logo placed on white surface” by Henry & Co. on Unsplash

During my 3rd week in #100DaysofCode Challenge I wanted to learn more about Async and working with APIs so I wanted to make a small app functionality to test my knowledge. After a couple of hours searching and filtering options I found an API called OMDB API(Open Movie Database), it’s a RESTful web service to retrieve movie or series information (title, plot, actors, year, poster, etc). so I choose to create a small app called Movie Catalog.

Making first request

To make a request we need an API key. You can get one by registry. In their [website].

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

Playing with the API

There are three options to make request:

Search(s=): Retrieves you all possible options.
Title(t=): A movie title.
ID(i=): a valid IMDB ID (e.g. tt1234567).

There are also more options we could include in our request like the data type to return (JSON / XML), the type of content (movie, series, or episode), year of the movie, etc. You can learn more options by reading their documentation.

Here we have our request for batman movies :

http://www.omdbapi.com/?apikey=[your-apikey]&s=batman

But wait, we have to use a function for this request, that’s where JavaScript and fetch API play their roles.

What is fetch API?

Fetch() allows you make http request using Promises for a more simple functionality avoiding callback hell and avoiding to use XMLHttpRequest if you don’t want to use a framework.

Fetch takes a required argument as resource path to retrieve and returns a promises if is revolved or not.

Our fetch request looks like this:

fetch(http://www.omdbapi.com/?apikey=[your-apikey]&s=batman)
.then((success) => { success.json() } )
.then((movies) => { console.log(movies) } )
.catch((error)=>{ console.log(error)});

One of the coolest features of fetch() is chaining promises. After making the request, we parse the information in JSON, then we chain to another promises to print the information in screen, then wallah!!!! , there is your movies in JSON.

 { Search: 
[ { Title: 'Batman Begins',
Year: '2005',
imdbID: 'tt0372784',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BZmUwNGU2ZmItMmRiNC00MjhlLTg5YWUtODMyNzkxODYzMmZlXkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_SX300.jpg' },
{ Title: 'Batman v Superman: Dawn of Justice',
Year: '2016',
imdbID: 'tt2975590',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg' },
{ Title: 'Batman',
Year: '1989',
imdbID: 'tt0096895',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_SX300.jpg' },
{ Title: 'Batman Returns',
Year: '1992',
imdbID: 'tt0103776',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BOGZmYzVkMmItM2NiOS00MDI3LWI4ZWQtMTg0YWZkODRkMmViXkEyXkFqcGdeQXVyODY0NzcxNw@@._V1_SX300.jpg' },
{ Title: 'Batman Forever',
Year: '1995',
imdbID: 'tt0112462',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BNWY3M2I0YzItNzA1ZS00MzE3LThlYTEtMTg2YjNiOTYzODQ1XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg' },
{ Title: 'Batman & Robin',
Year: '1997',
imdbID: 'tt0118688',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_SX300.jpg' },
{ Title: 'The Lego Batman Movie',
Year: '2017',
imdbID: 'tt4116284',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BMTcyNTEyOTY0M15BMl5BanBnXkFtZTgwOTAyNzU3MDI@._V1_SX300.jpg' },
{ Title: 'Batman: The Animated Series',
Year: '1992–1995',
imdbID: 'tt0103359',
Type: 'series',
Poster: 'https://m.media-amazon.com/images/M/MV5BNzI5OWU0MjYtMmMwZi00YTRiLTljMDAtODQ0ZGYxMDljN2E0XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg' },
{ Title: 'Batman: Under the Red Hood',
Year: '2010',
imdbID: 'tt1569923',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BYTdlODI0YTYtNjk5ZS00YzZjLTllZjktYmYzNWM4NmI5MmMxXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_SX300.jpg' },
{ Title: 'Batman: The Dark Knight Returns, Part 1',
Year: '2012',
imdbID: 'tt2313197',
Type: 'movie',
Poster: 'https://m.media-amazon.com/images/M/MV5BMzIxMDkxNDM2M15BMl5BanBnXkFtZTcwMDA5ODY1OQ@@._V1_SX300.jpg' } ],
totalResults: '345',
Response: 'True' }

Here is a preview of the search function that i made

Thanks for your time for read my article i hope you liked it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade