HTML中的逻辑分组，用于从对象中提取的结果

Question

我成功地从 API 遍历对象/数组，并且能够获取三个参数，作者/标题/描述，并将每个参数的结果放入它们自己的列表中。换句话说，数组中的所有作者都在html中放入一个列表中，所有标题放入一个列表中，所有描述放入一个列表中。

如何对结果进行逻辑分组，例如，对于每本书，将结果作者/标题/描述放在页面上的一个区域...（div？）？

const searchButton = document.getElementById('searchbtn')
const form = document.getElementById('myform')
const author = document.querySelector('.author')
const title = document.querySelector('.title')
const description = document.querySelector('.description')

document.addEventListener("DOMContentLoaded", () => {
    searchButton.addEventListener('click', e => {
        e.preventDefault()
        const inputSearch = document.getElementById('books').value
        const bookUrl = ('https://www.googleapis.com/books/v1/volumes?q=' + inputSearch)
        fetch(bookUrl)
        .then (res => res.json())
        .then (obj => {
            obj.items.forEach((book, index) => {
                const listAuthor = document.createElement('li')
                const listTitle = document.createElement('li')
                const listDescription = document.createElement('li')
                listAuthor.innerText = book.volumeInfo.authors
                listTitle.innerText = book.volumeInfo.title
                listDescription.innerText = book.volumeInfo.description

                author.appendChild(listAuthor)
                title.appendChild(listTitle)
                description.appendChild(listDescription)
            })
            form.reset()
        })
    })
})

Answer 1

如果我误解了您的问题，请告诉我。

const booksArray = [
  {author: 'Eric Hoffer', title:'The Ordeal Of Change', desc: 'In times of change...' },
  {author: 'Eric Hoffer', title:'The True Believer', desc: 'Learners inherit the earth' },
  {author: 'Eric Hoffer', title:'The Passionate State Of Mind', desc: 'while the learned...' },
]


const groupBooks = (books) => {
  const bookContainer = document.createElement('section');

  books.forEach((book, index) => {
    // extract values
    const {author, title, desc} = book;

    // construct composite book article
    const bookDescription = `
          <article>
            <small>book ${index + 1} </small>
            <h2>Title: ${title}</div> 
            <h3>Author: ${author}</h3> 
            <p>Desc: ${desc}</p> 
          </article>
          `;

    // append it to the main container above
    bookContainer.append(bookDescription);
  })

  console.log(bookContainer);
  //to see the results...
  document.body.prepend(bookContainer);

}

groupBooks(booksArray);