Cannot get json data from ajax request to display in html

Question

I am trying to use the New York Times bestseller list API to list the current top 20 in html - I've managed to retrieve the data using ajax (I can see it using developer tools) but have got stuck trying to get it to display on the page. I don't get any error messages - nothing happens. This is my code as is:

<!DOCTYPE HTML>
<html>

    <head>
        <title>Discover Books</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>

    <div id='books'> 
    </div>


    </head>

<script>
    $(document).ready(function(){
    $.ajax ({
            type: 'GET',
        dataType: 'json',
        url: 'http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?api-key=*API_KEY*',

        success: function(response){
          console.log(response);
          for(var i = 0; i < response.length; i++) {
            var listing = response[i];
            $('#books').append('<h3>' + title + '</h3>');
          }
      }, 
        error: function(xhr, status, error){
          console.log(status);
          console.log(error);
      }
    });
  })
</script>

</html>

Any hints as to what I'm doing wrong? Thanks

Don't put your api key in the code example. I don't know how this API works, but its generally a bad idea. — Dan
– Dan, Commented Jan 5, 2016 at 23:39

Dan · Accepted Answer · 2016-01-05 23:42:39Z

1

title is undefined in you success function. You should refer to listing.title.

success: function(response){
  console.log(response);
  for(var i = 0; i < response.length; i++) {
    var listing = response[i];
    $('#books').append('<h3>' + listing.title + '</h3>');
  }
}

And looking at the API response, you need to drill down into the JSON a bit to get to the books.

success: function(response){
  console.log(response);
  books = response.results.books; //You may need to tinker with this
  for(var i = 0; i < books.length; i++) {
    var listing = books[i];
    $('#books').append('<h3>' + listing.title + '</h3>');
  }
}

edited Jan 5, 2016 at 23:42

answered Jan 5, 2016 at 23:37

Dan

11.2k5 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user984879 Over a year ago

Thank you very much that's solved the problem! I've been stuck on that for hours...

Dan Over a year ago

Hey, if you are paying for that api key or you are concerned with its security at all, you may want to request a new one.

Phil Smith · Accepted Answer · 2016-01-05 23:45:12Z

0

Don't you have to call JSON.parse(response) before using its elements?

answered Jan 5, 2016 at 23:45

Phil Smith

484 bronze badges

Collectives™ on Stack Overflow

Cannot get json data from ajax request to display in html

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related