Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

APIs

Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

API search function JSON, what am I missing?

Hello, I am learning to use API's. I am trying to search the OMDb API for a movie title and then have the movie image / poster appear in my site. I can not get this code to work and would appreciate knowing where I am going wrong. Thank you in advance.

 // Creating the AJAX Request
//
$('form').submit(function(event) {
 // Stop the form from submitting
  event.preventDefault();

  // Get The value from the form
  var movieURL = "http://www.omdbapi.com/?";
  var movieName = $('#search').val();
  var movieOptions = {
     s: "",

   };

  function displayMovies(data) {
    var movieHTML = '<ul>';
    $.each(data.items, function(index, value) {
  movieHTML += '<li>';
  movieHTML += '<img ';
  movieHTML += 'src="' + value.Poster + '" ';
  movieHTML += 'alt="' + value.Title + '" >';
  movieHTML += '</li>';
    });//end each
    movieHTML += '</ul>';
    $('movieInformation').html(movieHTML);

  }
   $.getJSON(movieURL, movieOptions, displayMovies);// end getJSON

     }); // end submit function



     <div class="heading">
    <h1>Movie Search</h1>
    <form>
      <label for="search">Type a movie title</label>
      <input type="search" name="search" id="search">
     <input type="submit" value="Search" id="submit">
    </form>

  </div>



<div id="movieInformation">
</div>

1 Answer

Steven Parker
Steven Parker
231,275 Points

:mailbox_with_mail: Hi, I got your request.

This one took a bit of analysis. I found several issues:

  • the API requires either an "i" or "t" or "s" parameter in the URL but none was given
  • the data property containing the search results is "Search" not "items"
  • you forgot the "#" to indicate you were selecting the output div by id
  • the movieOptions weren't necessary for the API

It's a really cool thing, once I got it working. I condensed the code a bit, added a response count display and expanded the images to include a title attribute:

// Creating the AJAX Request
//
$("form").submit(function(event) {
  // Stop the form from submitting
  event.preventDefault();

  // Get The value from the form
  var movieURL = "http://www.omdbapi.com/?s=" + $("#search").val();

  function displayMovies(data) {
    var results = data.totalResults || 0;
    var movieHTML = `<h2>Total Results: ${results}</h2><ul>`;
    $.each(data.Search, (index, value) => {
      movieHTML += "<li>";
      movieHTML += `<img src="${value.Poster}" alt="${value.Title}" title="${value.Title}">`;
      movieHTML += "</li>";
    }); //end each
    movieHTML += "</ul>";
    $("#movieInformation").html(movieHTML);
  }
  $.getJSON(movieURL, displayMovies);
}); // end submit function
Tracy Excell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you for answering my request. I worked a bit out last night and am sure this answer will help others trying to get their heads around api's too.

Steven Parker
Steven Parker
231,275 Points

:information_source: UPDATE: Due to increasingly heavy usage, this API is apparently going to be private soon. But for now, subscriptions start at just $1/month. See the OMDB Patreon page for details.