javascriptapiappendgoogle-books

Getting object Object when trying to append information from Googlebooks API


I'm working on a project with Googlebooks API but when I try to append the data onto the DOM, I get [object Object].

$('button').on('click', function(){
  //code below allows you to pick between buttons so that it gives you different results
  var x = $(this).data('search');
  console.log(x);
  //code below pulls the results from the google api key. 
  var queryURL = ' https://www.googleapis.com/books/v1/volumes?q=+genres'+x+'&api_key=AIzaSyAHjfwSHwLklSKp1lb38metYYW-gtt5tY4&limit=10';
  console.log(queryURL);
  //code below is acutual api call
  $.ajax({url:queryURL,method:'GET'})
    .done(function(response){
      console.log(response.items[0].volumeInfo);
      //to get the results on the page
      $('#body').append('<span>'+response.items[0].volumeInfo+'</span>');
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body">
  <button>Click Me</button>
</div>

What am I doing wrong?


Solution

  • The reason you are getting [object Object] is because you are trying to add a Javascript object to the screen (shown in the console).

    To solve this you must output each property individually (e.g. response.items[0].volumeInfo.title which will return "Longman Anthology of Old English, Old Icelandic, and Anglo-Norman Literatures")

    A simple way to output the whole object as a string could be to use JSON.stringify(), but you might want to format the results better by outputting individual properties. See result below for non-formatted result.

    $('button').on('click', function(){
      //code below allows you to pick between buttons so that it gives you different results
      var x = $(this).data('search');
      console.log(x);
      //code below pulls the results from the google api key. 
      var queryURL = ' https://www.googleapis.com/books/v1/volumes?q=+genres'+x+'&api_key=AIzaSyAHjfwSHwLklSKp1lb38metYYW-gtt5tY4&limit=10';
      console.log(queryURL);
      //code below is acutual api call
      $.ajax({url:queryURL,method:'GET'})
        .done(function(response){
          console.log(response.items[0].volumeInfo);
          //to get the results on the page
          $('#body').append('<span>'+JSON.stringify(response.items[0].volumeInfo)+'</span>');
        })
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="body">
      <button>Click Me</button>
    </div>

    And some formatting:

    $('button').on('click', function(){
      //code below allows you to pick between buttons so that it gives you different results
      var x = $(this).data('search');
      console.log(x);
      //code below pulls the results from the google api key. 
      var queryURL = ' https://www.googleapis.com/books/v1/volumes?q=+genres'+x+'&api_key=AIzaSyAHjfwSHwLklSKp1lb38metYYW-gtt5tY4&limit=10';
      console.log(queryURL);
      //code below is acutual api call
      $.ajax({url:queryURL,method:'GET'})
        .done(function(response){
          console.log(response.items[0].volumeInfo);
          //to get the results on the page
          $('#body').append(
            '<p>Tilte: '+response.items[0].volumeInfo.title+'</p>' +        
            '<p>Authors: '+response.items[0].volumeInfo.authors.join(", ")+'</p>'
          );
        })
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="body">
      <button>Click Me</button>
    </div>