I am successfully iterating through an object/array from an API and am able to take three parameters, Author/Title/Description, and place results from each parameter into their own lists. In other words, all Authors from the array are being placed in html into one list, all Titles are placed into one list, all descriptions are placed into one list.

How can I group the results logically, as in, for each book have the results Author/Title/Desc placed into one area on the page ...(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()
        })
    })
})

CodePudding user response：

Please let me know if I misinterpreted your need.

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 div
    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);