尝试从 Googlebooks API 附加信息时获取对象对象

Question

我正在使用 Googlebooks API 进行一个项目，但是当我尝试将数据附加到 DOM 时，我得到了 [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>

我做错了什么？

Answer 1

volumeInfo 是一个 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.title);
        //to get the results on the page
        $('body').append('<p>'+response.items[0].volumeInfo.title + ' - ' + response.items[0].volumeInfo.authors.join(', ') +'</p>');
    })
});

Answer 2

您获得 [object Object] 的原因是因为您试图将 Javascript 对象添加到屏幕（显示在控制台中）。

要解决此问题，您必须单独输出每个属性（例如 response.items[0].volumeInfo.title，这将 return "Longman Anthology of Old English, Old Icelandic, and Anglo-Norman Literatures"）

将整个对象输出为字符串的一种简单方法是使用 JSON.stringify()，但您可能希望通过输出单个属性来更好地格式化结果。请参阅下面的结果以了解未格式化的结果。

$('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>

还有一些格式：

$('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>

尝试从 Googlebooks API 附加信息时获取对象对象

Getting object Object when trying to append information from Googlebooks API

javascript

api

append

google-books