Getting Undefined when running search using IMBD

StackOverflow https://stackoverflow.com/questions/22750298

Question

I am getting UNDEFINED when running a search using the IMDB API.

When I run a search using a ?t= which is designed to return one result it shows but when I run a search using the new search function ?s= it is meant to show multiple results.
For example if I run a search for Star Wars it should return all titles with Star Wars in it but it displays undefined. I believe I need an each statement or something but I don't know how to code it.

code below 

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sample</title>

<!--Start StyleSheets and Java Code imports-->
    <link rel="stylesheet" type="text/css" href="Images_StyleSheets/HomePageStyle.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
$( document ).ready(function() {
    $("#SampleSearchButton").click(function() {
        getImdbInfo($("#Title").val());
        })
});

//The function below takes the entered title and searchs imdb for a match then it displays as followed

function getImdbInfo(Title) {
    var url = "http://www.omdbapi.com/?s=" + Title;
    $.ajax({
      url: url,
      cache: false,
      dataType: "jsonp",
      success: function(data) {
                console.log(data);
            var str = "";
            str += "<p>Title :" +data.Title+ "</p>";
            str += "<p>Year :" +data.Year+ "</p>";

            $("#SampleResults").html(str);
      },
      error: function (request, status, error) { alert(status + ", " + error); }
    });
}
</script>
</head>
 <body>
 <center>
               <input id="Title" type="text" value="" />
               <input id="SampleSearchButton" type="button" value="SearchSample"/>
               <br />
</center>
<div id="SampleResults">
</div>

</body>
</html>
Was it helpful?

Solution

HTML + JS + jQuery

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sample</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
        $("#SampleSearchButton").click(function() {
            getImdbInfo($("#title").val());
        })
    });

    // The function below takes the entered title and searchs imdb for a match then it displays as followed

    function getImdbInfo(Title) {
        $.ajax({
          url: "http://www.omdbapi.com/?s=" + Title,
          cache: false,
          dataType: "json",
          success: function(data) {
                // you get an object for iteration, the keys are Title, Type, Year, imdbID
                console.log(data);

                var str = '<table>';
                str += "<thead><th>Index</th><th>Title</th><th>Type</th><th>Year</th><th>imdbID</th></thead>"

                // iterate over the data result set
                $.each(data.Search, function(index, element) {
                    str += "<tr>";
                    str += "<td>" + index + "</td>";
                    str += "<td>" + element.Title + "</td>";
                    str += "<td>" + element.Type + "</td>";
                    str += "<td>" + element.Year + "</td>";
                    str += "<td>" + element.imdbID + "</td>";
                    str += "</tr>";
                });

                str += '</table>';

                // insert the html
                $("#SampleResults").html(str);
          },
          error: function (request, status, error) { alert(status + ", " + error); }
        });
    }
    </script>
</head>
<body>


<!-- search textbox -->
<input type="text" id="title" placeholder="heat">

<!-- do search button -->
<button type="text" id="SampleSearchButton">Search</button>

<!-- display results container -->
<div id="SampleResults"></div>
</body>
</html>

Result

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top