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 =
            `
         <li class="cards__item">
                <div class="card">
                    <img class="card__image" src="https://unsplash.it/800/600?image=82" alt="">
                    <div class="card__content">
                        <div id="book-title" class="card__title">${title}</div>
                        <p id="book-desc" class="card__text">This is the shorthand for flex-grow, flex-shrink and
                        </p>

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

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

            </li>`;
    } catch (e) {
        console.log(e);
    }


}
function bookToHTMLRow(book) {
return
       `<li id="card-${book.id}">
                <img src=${book.thumbnailUrl}>
                <div >
                        <div${book.title}</div>
                        <p${book.shortDescription}</p>
                </div>

            </li>`;
}

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?

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:

<div${book.title}</div>

To

<div> ${book.title} </div>

 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 `<li id="card-${book.id}"> <img src=${book.thumbnailUrl}> <div> <div> ${book.title} </div> <p> ${book.shortDescription} </p> </div> </li>`; } 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); } } 

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="books-table"></div>