- First, try reading through the documentation provided in the link above. Notice that we will have to use a url with parameters placed in the url in order to gather the data we need.
- Also, please register yourself for a free API key to use for API usage.
- Here, we create the HTML for the code.
<div id="omdb_demo" class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<div class="col-lg-4">
<label class="sr-only" for="title">Title:</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
<div class="col-lg-4">
<label class="sr-only" for="year">Year:</label>
<input type="text" class="form-control" id="year" placeholder="Year">
</div>
<button class="btn btn-default" id="omdb_submit">Submit</button>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Raw Output: <span id="output"></span></h2>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="pretty_movie_output">Make me Pretty:</h2>
</div>
</div>
- Next, we're going to add the functionality. We'll use a click function to start off our query.
$("#omdb_submit").click(function(){
});
- Next, let's store the title and year values that users input into variables. These variables will then be used in the url string.
- Now that we have the variables, we can concatenate them into a query string. This query string is going to be our url that we send to the API.
$("#omdb_submit").click(function(){
//Gather values from the other fields and store them into variables.
var title = $("#title").val();
var year = $("#year").val();
// Concatenate those variables to a query string.
var queryString = "http://www.omdbapi.com/?apikey=YOURAPIKEY&t=" + title + "&y=" + year + "&plot=short&r=json";
});
- Finally, we'll add our complicated AJAX into the mix. The AJAX function will query the url we passed to it and once done, we'll then output our data into our html. Take a look at th at the comments in the code for more details.
$("#omdb_submit").click(function(){
//Gather values from the other fields and store them into variables.
var title = $("#title").val();
var year = $("#year").val();
// Concatenate those variables to a query string.
// Note: If you get errors about mixed protocols, then just change the url below to be in https format
var queryString = "https://www.omdbapi.com/?apikey=YOURAPIKEY&t=" + title + "&y=" + year + "&plot=short&r=json";
// Put that query string into the AJAX request
$.ajax({
url: queryString, // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
method: 'GET'
}).done(function(response) {
if(response.length < 1) {
// Output error message into output container
$("#output").html("Sorry, no movies were found :(");
} else {
// Output data into output container
$("#output").html(JSON.stringify(response));
// create an HTML element that will hold all of the prettified elements
var movieContainer = $('<div class="movie_Container">');
// Append the movie container to the existing container
$(".pretty_movie_output").append(movieContainer);
// Go through each property of the object and create/input the data from the object
for(var prop in response) {
var element;
if (prop == "Poster" && response[prop] != "N/A") {
element = $("<img class='pretty'>").attr("src", response[prop]);
} else {
element = $("<h3 class='pretty'>").text(prop + ": " + response[prop]);
}
movieContainer.append(element);
}
}
});
});