vendredi 22 mars 2019

Extract data from a JSON file

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?




Aucun commentaire:

Enregistrer un commentaire