从谷歌图书 api 中分离元素答案

【问题标题】：separate elements from google books api从谷歌图书 api 中分离元素
【发布时间】：2020-03-31 14:45:42
【问题描述】：

很久以前我没有用 javascript 编程，所以我决定制作一个“书柜”项目来管理阅读的书籍，并且我想阅读更多内容我很难将元素分开个性化样式，因为它在一个 div 中选择了 api 的所有结果。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <link rel="stylesheet" href="./css/bookcase.css">
    <title>project</title>
</head>
<body>

    <div id="content">
    </div>

    <script src="https://www.googleapis.com/books/v1/volumes?q=clean+code&callback=handleResponse></script>
</body>
</html>

function handleResponse(response) {
    for (var i = 0; i < response.items.length; i++) {
      var item = response.items[i];
      var book = document.getElementById('content')
      book.innerHTML += "<br>" + '<img src=' + response.items[i].volumeInfo.imageLinks.thumbnail + '>';
      book..innerHTML += "<br>" + item.volumeInfo.title;
      book..innerHTML += "<br>" + item.volumeInfo.authors;

【问题讨论】：

标签： javascript html css api google-books

【解决方案1】：

干净的答案 - 你应该使用 document.appendChild(child) 而不是 innerHTML 方法。

此外，最近添加的 js 方法很少，可以帮助您操作大型 JSON 对象 - map、reduce、filter。

我添加了示例，如何将原始对象清理为较小的数组，并将该数组中的项目插入到 html 页面中。

function demo (obj) {
  // getting all items from object

  const book = Object.keys(obj).map(item => obj['items']).reduce(
    (acc,rec, id, array) => {

      // getting Cover, Title, Author from each item
      let singleBookCover = rec[id].volumeInfo.imageLinks.thumbnail;
      let singleBookTitle = rec[id].volumeInfo.title;
      let singleBookAuthor = rec[id].volumeInfo.authors[0];

      // Creating new array only with Cover, Title, Author
      return [...acc, {singleBookCover, singleBookTitle, singleBookAuthor}]
    },
    []
  ).forEach( item => {

    // For each item on our array, we creating h1
    let title = document.createElement('h1');
    title.textContent = `${item.singleBookTitle} by ${item.singleBookAuthor}`;

    // img
    let img = document.createElement('img');
    img.src = item.singleBookCover;
    img.alt = `${item.singleBookTitle} by ${item.singleBookAuthor}`;

    // and div wrapper
    let container = document.createElement('div');

    // adding our child elements to wrapper
    container.appendChild(title).appendChild(img);

    // adding our wrapper to body
    document.body.appendChild(container);
   })
  return book
}

希望我的回答对你有帮助）

【讨论】：

【解决方案2】：

function handleResponse(obj) {
  const container = document.getElementById("container")
  obj.items.forEach((rec, index) => {
    let singleBookCover =
      rec.volumeInfo.imageLinks && rec.volumeInfo.imageLinks.smallThumbnail;
    let singleBookTitle = rec.volumeInfo.title;
    let singleBookAuthor = rec.volumeInfo.authors[0];
    let book = document.createElement("div");
    book.className = "book"
    book.innerHTML = `
    <div><h1>${singleBookTitle}<h1>
    <p>${singleBookAuthor}</p>
    <img src="${singleBookCover}"></img>
    </div>
    `
    content.appendChild(book)
  });
}

 <div id="content" class="books">
        </div>

        <script src="https://www.googleapis.com/books/v1/volumes?q=clean+code&callback=handleResponse"></script>

【讨论】：