TheMovieDb API web example with JQuery

This is a simple tutorial that demonstrates how to build a [tiny] web-app which communicates with themoviedb.org API. The example app in this tutorial will fetch a list of popular movies from themoviedb.org and display the list in a webpage.

It is very common for apps to communicate with RESTful APIs like themoviedb and what you will learn here will likely be used multiple times as a developer.

Requirements

1. Register an account with themoviedb.org, get your API key.
2. For this project, we will be using bootstrap for styling the webpage. This is optional.
3. Add JQuery to the project. (You can use any other javascript library of your choice).
4. Parse JSON using javascript.

The code for this project is available at: https://github.com/buildbro/moviedb-web-jquery

JQuery code:

<script type="text/javascript">
  var api_key = ""; //TODO insert your unique API KEY here
  var api_url = "https://api.themoviedb.org/3/movie/popular?api_key=" + api_key;
  $.getJSON( api_url, function( data ) {
$.each( data.results, function( i, item ) {
    var posterFullUrl = "https://image.tmdb.org/t/p/w185//" + item.poster_path;
    $(`<div class="col-3 mb-1">
         <img src="${posterFullUrl}">
         <h5>${item.title}</h5>
       </div>`).appendTo(".movies");
   });
  });
 </script>

In the code above, we are using JQuery’s $.getJSON() to make an HTTP request to api_url. The variable data holds the response. While data.results points to the data (list of movies) at the results node of the JSON response from themoviedb. The JSON response contains a list which we are using JQuery’s $.each() method to loop through. In each step of the loop, we append a div (that has the movie poster and title as child elements) to the .movies class in our HTML body.

<div class="container mt-3">
  <div class="row movies">
   <!-- Movies will be loaded into this space -->
  </div>
 </div>

Below is a screenshot of the final output when we open our HTML document in a browser:

screenshot themoviedb web jquery

Conclusion

I used JQuery for this project because of how convenient it is to get the demo website up and running with just one file and no need to install any extra tools on your computer. Just code, save, right-click your HTML file and open with your favourite browser. The demo app is almost useless, feel free to get creative and clean-up the code if you have time. Cheers and bye-bye for now.

Code again: https://github.com/buildbro/moviedb-web-jquery