отдельные элементы из API книг Google - PullRequest
Новая
       60

отдельные элементы из API книг Google

0 голосов
/ 31 марта 2020

это было долгое время go, когда я не программировал в javascript, поэтому я решил сделать проект "книжного шкафа" для управления чтением книг, и что я хочу читать больше, у меня возникают трудности с тем, как разделить элементы, чтобы персонализировать стиль, потому что он выбирает все результаты API в одном только div.

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;

Ответы [ 2 ]

0 голосов
/ 31 марта 2020 

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>
0 голосов
/ 31 марта 2020

Чистый ответ - вы должны использовать document.appendChild(child) вместо внутреннего HTML метода.

Также есть несколько недавно добавленных js методов, которые могут помочь вам управлять большими JSON объектами - карта, уменьшить, отфильтровать.

Я добавил пример того, как вы можете очистить исходный объект в меньший массив и вставить элементы из этого массива в 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
}

Надеюсь, мой ответ поможет вам)

...