Extract data from a JSON file

Question

My code is about bookStore with list of books. I need to extract all data(books) from a JSON file and put them in a cardView. My code is working there I did not got any error but the data is not extracting or printing in a webpage. There is an index.html that structured the page and I wrote also cardView code in it. index.js class document.addEventListener("DOMContentLoaded", async () => { await handleLoadListValues(); }); async function getBooks(searchOptions) { let url = '/api/books/'; if (searchOptions) { url = `${url}?search-options=${searchOptions}`; } const response = await fetch(url); return response.json(); } async function handleLoadListValues(searchOptions) { try { const books = await getBooks(); document.querySelector('#books-table').innerHTML = `

${title}

This is the shorthand for flex-grow, flex-shrink and

${books.map(book => bookToHTMLRow(book)).join('')}

`; } catch (e) { console.log(e); } } function bookToHTMLRow(book) { return `

`; } JSON file data Example { "_id": 1, "title": "Unlocking Android", "isbn": "1933988673", "pageCount": 416, "publishedDate": { "$date": "2009-04-01T00:00:00.000-0700" }, "thumbnailUrl": "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg", "shortDescription": "Unlocking Android: A Developer's Guide provides concise...", "longDescription": "Android is an open source mobile phone... ", "status": "PUBLISH", "authors": [ "W. Frank Ableson", "Charlie Collins", "Robi Sen" ], "categories": [ "Open Source", "Mobile", "java" ] }, What is wrong with my code? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

json from mocky io i test with in case not working mock another one with the same json and change the url : [ { "id": 777, "thumbnailUrl": "https://parismatch.be/app/uploads/2018/04/Macaca_nigra_self-portrait_large-e1524567086123-1100x715.jpg", "title": "balabla", "shortDescription": "jijiji" } ] i tried with fetech then I changed to axios, I corrected some html tags like:

To

${book.title}

document.addEventListener("DOMContentLoaded", async() => { await handleLoadListValues(); }); async function getBooks(searchOptions) { const books = await axios.get('http://www.mocky.io/v2/5c94e68a3600006c15941d7e') return books.data } function bookToHTMLRow(book) { return `

${book.title}

${book.shortDescription}

`; } async function handleLoadListValues(searchOptions) { try { const books = await getBooks(true); document.querySelector('#books-table').innerHTML = `${books.map(book => bookToHTMLRow(book)).join('')}`; } catch (e) { //console.log(e); } }

Run code snippetExpand snippet