Entonces, estoy tratando de extraer la información del volumen de la matriz JSON de la URL proporcionada: https://www.googleapis.com/books/v1/volumes?q=HTML5
Tratando de extraer autor, título, imágenes, números de página y descripción.
Esta clase específica de mi código HTML en la que quiero poner los datos JSON que mencioné anteriormente es la clase 'b-card':
<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>El archivo script.js que probé está a continuación:
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 }El código anterior solo agrega la imagen del título y el autor, pero no puedo hacer que se carguen en mi HTML. ¿Cuáles son las formas de resolver esto? ¿Estoy llamando a la URL correctamente en la etiqueta del script HTML?
Olvidé mencionarlo: me gustaría lograr esto sin usar JQuery y AJAX. También intenté ingresar la devolución de llamada a handleResponse en la URL de la etiqueta del script, pero no funciona.
no puede agregar al HTML porque el container es una matriz, por lo que necesita el index del elemento
container[index].appendChild(title).appendChild(author).appendChild(img); pero aquí la versión simple, y no olvides agregar &callback=handleRespons a la URL de la API
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>