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()
})
})
})
Please let me know if I misinterpreted your issue.
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);