Getting Information from TMDB

Currently I am stuck I want to return the title, plot and poster using themoviedb api I have no idea how to start the coding for this

Currently when i run a search the information is display in the console log of the browser i want to take that information and style it into a table format nothing fancy just the title and poster need help no clue where to start

doc site here http://docs.themoviedb.apiary.io/#get-%2F3%2Fsearch%2Fmovie

<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key=My API KEY HERE';

    $('button').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {
             console.log(data);

            }
        });
    });
});
</script>
</head>
<body>
<input id="movie" type="text" /><button>Search</button>
</body>
</html>

Solution

Basically, you are trying to do it too fast. Wrap your function with $(document).ready(...).

$(document).ready(function() {
    var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie',
    input,
    movieName,
    key = '?api_key=api key here';

    $('button').click(function() {
        var input = $('#movie').val(),
            movieName = encodeURI(input);
        $.ajax({
            url: url + mode + key + '&query='+movieName ,
            dataType: 'jsonp',
            success: function(data) {
             console.log(data);
            },
            error: function (request, status, error) {
             alert(status + ", " + error);
            }
        });
    });
});

<input id="movie" type="text" /><button>Search</button>