Getting Information from Console.log and displaying it in div

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

  •  25-06-2023
  •  | 
  •  

Question

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>

output looks like this it returns objects under a movie title in his chase 300 enter image description here

error when running each staement

enter image description here

Was it helpful?

Solution

Something like this:

 $.ajax({
    url: url + mode + key + '&query='+movieName ,
    dataType: 'jsonp',
    success: function(data) {
        var table = '<table>';
        $.each( data.results, function( key, value ) {
          table += '<tr><td>' + value.original_title + '</td><td>' + value.release_date + '</td></tr>';
        });
            table += '</table>';
        $('.myelement').html(table);
    }
});

OTHER TIPS

You don't read from the console. It's just for outputting debug information. The AJAX call basically returns an JavaScript object (whose structure you can see in the the console).

Access the data from it just like from any other JavaScript object (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects if you need to learn how) and work with that.

EDIT: If you need to know how to display the data on the web page, you need to learn about the DOM. See for example: http://www.elated.com/articles/javascript-dom-intro/

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