Getting undefined / no result when printing api callback

Question

I am trying to run my script that will look for the name of a movie from the movie database. I get results in the console and no errors. But in my function, renderMoviesit should store the headers of the API headers API, graph, etc. In my variables, but when I print it in a list, it gives me nothing (empty) or undefined. I'm kind of new to jQuery, AJAX, and the API, so I follow the guide, so the code is not completely written by me.

OBS: I get undefined when using this $("<td>" + plot + "</td>"), but empty when using $("<td>").append(title). You can find this code in the middle of the renderMovies function.

For example: I am looking for the movie Avatar, and I get two results. However, the two results get “saved” as undefinedin the plot description and spaces from the title.

$(document).ready(function(){
  $(init);

  function init() {
    $("#searchMovie").click(searchMovie);   
    var movieTitle = $("#movieTitle");
    var table = $("#results");
    var tbody = $("#results tbody");

    function searchMovie(){
      var title = movieTitle.val();

      $.ajax({
        url: "http://www.myapifilms.com/imdb/idIMDB?title=" + title + "&token=b81c6057-20cf-4849-abc4-decbf9b65286&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&keyword=0&quotes=0&fullSize=0&companyCredits=0&filmingLocations=0", 
        dataType: "jsonp",     
        success: renderMovies
      });
    };

    function renderMovies(movies) {
      console.log(movies);
      tbody.empty();

      for(var m in movies) {
        var movie = movies[m];
        var title = movie.title;
        var plot = movie.simplePlot;
        var posterUrl = movie.urlPoster;
        var imdbUrl = movie.urlIMDB;

        var tr = $("<tr>");
        var titleTd = $("<td>").append(title); // blank 
        var plotTd = $("<td>" + plot + "</td>"); // undefined on my website

        tr.append(titleTd);
        tr.append(plotTd);

        tbody.append(tr);
      }
    }
  }
});

Answer 1

I reordered your functions and calls because some of the variables were undefined. (Google Chrome → F12 (the developer console opens))

This returns a response when a button is pressed.

    $(document).ready(function () {

function searchMovie() {
    var movieTitle = $("#movieTitle");
    var title = movieTitle.val();

    $.ajax({
        url: "http://www.myapifilms.com/imdb/idIMDB?title=" + title + "&token=b81c6057-20cf-4849-abc4-decbf9b65286&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=1&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0&keyword=0&quotes=0&fullSize=0&companyCredits=0&filmingLocations=0",
        dataType: "jsonp",
        success: renderMovies
    });
}

function renderMovies(movies) {
    console.log(movies);
    var movieInfo = movies.data.movies;

    var table = $("#results");
    var tbody = $("#results tbody");

    tbody.empty();

    for (var m in movieInfo) // Tar information från apin och stoppar in i egna variabler.
    {

        var movie = movieInfo[m];
        var title = movie.title;
        var plot = movie.simplePlot;
        var posterUrl = movie.urlPoster;
        var imdbUrl = movie.urlIMDB;

        var tr = $("<tr>");
        var titleTd = $("<td>").append(title); // blank
        var plotTd = $("<td>" + plot + "</td>"); // undefined on my website

        tr.append(titleTd);
        tr.append(plotTd);

        tbody.append(tr);

    }

}

$("#searchMovie").click(searchMovie);

});