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

JavaScript

Posted by grahammowat2
grahammowat2
6,038 Points

OMDb API: Struggling to get it working!

Hi, I am currently working my way through JavaScript courses as it's not my strongest skill at uni. Dave is a great teacher and I have worked through all of the AJAX and JQuery modules. It was suggested that I try to make a call with the OMDb API which returns JSON data on movies when you make a call

This is my current code

$(document).ready(function(){

    var movieApi = "http://www.omdbapi.com/?jsoncallback=?";

    var movieApiSettings = {
        t: "men in black",
        type: "Movie",
        tomatoes: true,
        r: "json"
    };

    function displayMovie(data) {
        var movieHTML = '<ul>';
      $.each(data.items,function(i,title) {
        movieHTML += '<li>';
        movieHTML += 'title: ' + title.title + 'Year: ' + title.year;
        movieHTML += '</li>';
      });     // end each

      $('#displayHere').html(movieHTML);
    } 
    $.getJSON(movieApi, movieApiSettings, displayMovie);
});

To overcome the cross origin policy I need to turn the data returned into JSONP which I think I have done using the jsoncallback=? part in the movieApi variable however this is not returning anything, just an error in the get callback in the JavaScript console.

If anyone has any idea what might be going wrong I would be grateful for the help! Thanks!

grahammowat2
grahammowat2
6,038 Points

That part is working now it is fetching the data but when I try to display it, the console is giving me the error "SyntaxError: Unexpected token :" can anyone explain this for me?

1 Answer

Hugh Middleton
Hugh Middleton
12,834 Points
Hugh Middleton
Hugh Middleton
12,834 Points

There are a couple of issues here...

Both the jQuery and OMDB docs define the JSONP parameter as 'callback', as opposed to 'jsoncallback'. You can also just specify this in your settings object (see below). So your first line could just be: 

var movieApi = "http://www.omdbapi.com";

From your displayMovie function, it looks like you are expecting a list of search results, however the t= parameter in OMDB returns one specific title (not an array), which will mess with your $.each call. You are probably after s= which performs a search: 

var movieApiSettings = {
  s: "men in black",
  type: "Movie",
  tomatoes: true,
  r: "json", 
  callback: ""
};

Finally, the search results are accessible with the 'Search' key in the response object, not 'items', and you need to be careful to specify the names of the attributes you want to extract exactly as they appear in the response (I've used square bracket notation below just to be clear): 

function displayMovie(data) {
  var movieHTML = '<ul>';
  $.each(data['Search'], function(i, title) {
    movieHTML += '<li>';
    movieHTML += 'title: ' + title['Title'] + 'Year: ' + title['Year'];
    movieHTML += '</li>';
  });     // end each

  $('#displayHere').html(movieHTML);
}

I hope this helps! It's working for me as I test in the console, so let me know if you still have issues.

grahammowat2
grahammowat2
6,038 Points

Thanks for this I'm going to give it a try although I managed to figure out a way of doing it last night my final code ended up as this:

$('#search').click(function() { event.preventDefault();

    var movieApi = "http://www.omdbapi.com/?";
    var program = $('#program').val();
    var programType = $('#programType').val();
    var movieApiSettings = {
        t: program,
        type: programType,
        plot: "full",
        tomatoes: true,
        r: "json"
    };

    function displayMovie(callback) {
        var movieHTML = '<ul>';
        var moviePoster = '<img'

        if (callback.Response = true) {

            movieHTML += '<li>';
            movieHTML += '<h1>' + callback.Title + '</h1>';
            movieHTML += '</li>';

            movieHTML += '<li>';
            movieHTML += '<p>' + 'Released: ' + callback.Released + '<p>';
            movieHTML += '</li>';

            movieHTML += '<li>';
            movieHTML += '<p>' + 'Staring: ' + callback.Actors + '<p>';
            movieHTML += '</li>';

            movieHTML += '<li>';
            movieHTML += '<p>' + 'Genre: ' + callback.Genre + '<p>';
            movieHTML += '</li>';

            movieHTML += '<li>';
            movieHTML += '<p>' + 'IMDB Rating: ' + callback.imdbRating + '<p>';
            movieHTML += '</li>';

            movieHTML += '<li>';
            movieHTML += '<p>' + 'Synopsis: ' + callback.Plot + '<p>';
            movieHTML += '</li></ul>';

            moviePoster += ' src="' + callback.Poster + '" alt="Image Not Available">';
            $('#displayDescription').html(movieHTML);
            $('#displayPoster').html(moviePoster);
        } else {
            movieHTML += '<li>'
            movieHTML += '<h3>Sorry it appears that this ' + movieApiSettings.type + ' is not available</h3>';
            movieHTML += '</li></ul>';
            $('#displayHere').html(movieHTML);
        }
    }
        $.getJSON(movieApi, movieApiSettings, displayMovie);
    });


    });

It works using two text inputs and a button to search. However you have shown me a better way thanks very much I will let you know how it goes :)