时间戳

首页 > 解决方案 > 从谷歌图书 api 中分离元素

javascript - 从谷歌图书 api 中分离元素

问题描述

很久以前我没有用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>

js

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;

标签： javascripthtmlcssapigoogle-books

解决方案

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>

推荐阅读