How can I interpret my JSON via Google Books API URL and display it on my HTML page using JS?

Question

So, I am trying to pull the volume info from the JSON array from the URL provided: https://www.googleapis.com/books/v1/volumes?q=HTML5

Trying to pull author, title, images, page numbers and description.

This specific class of my HTML code I want to put the JSON data that I have mentioned above in is the 'b-card' class:

    <div class="booklist">
        <div class="booklist-cards">
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
            <div class="b-card">

            </div>
        </div>
    </div>

<script src="https://www.googleapis.com/books/v1/volumes?q=HTML5"></script>
<script src="assets/js/script.js"></script>

The script.js file I have tried is below:

function handleResponse(obj) {

const book = Objects.keys(obj).map(item => obj['items']).reduce(
    (acc, rec, id, array) => {

    let singleBookCover = rec[id].volumeInfo.imageLinks.thumbnail;
    let singleBookTitle = rec[id].volumeInfo.title;
    let singleBookAuthor = rec[id].volumeInfo.authors[0];

    return [...acc, {singleBookCover, singleBookTitle, singleBookAuthor}]
    },
    []
).forEach( item => {
    let title = document.createElement('h1');
    title.textContent = `${item.singleBookTitle}`;

    let author = document.createElement('strong');
    author.textContent = `${item.singleBookAuthor}`;

    let img = document.createElement('img');
    img.src = item.singleBookCover;
    img.alt = `${item.singleTitle} by ${item.singleBookAuthor}`;

    let container = document.getElementsByClassName('b-card');

    container.appendChild(title).appendChild(author).appendChild(img);


})
return book
}

The above code only adds the title image and author, but I cant get them to load into my HTML. What are ways to resolve this? Am i calling the URL correctly in the HTML script tag?

Forgot to mention - would like to achieve this without using JQuery & AJAX. I have also tried inputting the callback to handleResponse in the script tag url but it doesnt work.

Answer 1

you can't append to the HTML because container is array so it need index of the element

container[index].appendChild(title).appendChild(author).appendChild(img);

but here simple version, and don't forget to add &callback=handleRespons to the API URL

function handleResponse(obj) {
   obj.items.forEach((item, index) => {
    if(index > 7) return; // limit 8 result
    let div = document.createElement('div');
    div.className = 'b-card';
    div.innerHTML = `<h1>${item.volumeInfo.title}</h1>
    <p><strong>${item.volumeInfo.authors[0]}</strong></p>
    <img src="${item.volumeInfo.imageLinks.thumbnail}" alt="${item.singleTitle} by ${item.volumeInfo.authors[0]}" />`
    
    let container = document.querySelector('.booklist-cards');
    container.append(div);
  })
}

<div class="booklist">
  <div class="booklist-cards">
  </div>
</div>
<script src="//www.googleapis.com/books/v1/volumes?q=HTML5&callback=handleResponse" async></script>