如何通过该API正确获取数组中的书籍标题信息？

我正在为网站用fetch调用Kakao书籍信息API，根据输入的书名返回相关书籍信息。输入某一示例书名后的console.log结果见截图，现在想获取返回数组里每个元素的标题信息，尤其不确定这段代码该怎么写才对：

.then((data) => {document.getElementById("bookinfo").innerHTML=
     data['documents'.authors];

完整的fetch脚本如下：

<script>
      function getBook(){
        let bookvalue=document.getElementById("book").value;
        fetch('https://dapi.kakao.com/v3/search/book?target=title&query=' + bookvalue, {
  headers: {
    Authorization: "KakaoAK TokenID"
  }
})
  .then((response) => response.json())
  .then((data) => {document.getElementById("bookinfo").innerHTML=
      data['documents'.authors];
                   });
      }
     </script> 

解决方法 #

原代码里的data['documents'.authors]是语法错误，而且API返回的documents是包含书籍对象的数组，要提取每个书籍的标题，需要遍历这个数组：

1. 从返回的data中拿到documents数组；
2. 遍历数组，提取每个元素的title字段；
3. 把提取出的标题整理成适合展示的格式，再插入到页面元素中。

修正后的完整脚本如下：

<script>
function getBook(){
  let bookvalue = document.getElementById("book").value;
  fetch('https://dapi.kakao.com/v3/search/book?target=title&query=' + bookvalue, {
    headers: {
      Authorization: "KakaoAK TokenID"
    }
  })
  .then((response) => response.json())
  .then((data) => {
    // 提取所有书籍标题，生成无序列表
    const bookTitles = data.documents.map(book => `<li>${book.title}</li>`).join('');
    // 插入到页面元素中
    document.getElementById("bookinfo").innerHTML = `<ul>${bookTitles}</ul>`;
  });
}
</script>

说明：

• data.documents.map(book => book.title) 遍历每个书籍对象，提取出标题；
• 用<li>包裹每个标题，再用join('')拼接成字符串；
• 最后用<ul>包裹生成无序列表，也可以根据需求改成其他格式（比如用换行分隔的纯文本）。

内容的提问来源于stack exchange，提问作者HLee