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()
})
})
})