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
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsAPI 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
230,995 Points
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
Front End Web Development Techdegree Graduate 15,333 PointsTracy Excell
Front End Web Development Techdegree Graduate 15,333 PointsThank 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
230,995 PointsSteven Parker
230,995 Points