Estoy iterando con éxito a través de un objeto/matriz desde una API y puedo tomar tres parámetros, Autor/Título/Descripción, y colocar los resultados de cada parámetro en sus propias listas. En otras palabras, todos los autores de la matriz se colocan en html en una lista, todos los títulos se colocan en una lista, todas las descripciones se colocan en una lista.
¿Cómo puedo agrupar los resultados lógicamente, como en, para cada libro, tener los resultados Autor/Título/Desc colocados en un área en la página ... (¿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() }) }) })Por favor, avíseme si malinterpreté su problema.
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);