时间戳

首页 > 解决方案 > 从 JSON 文件中提取数据

javascript - 从 JSON 文件中提取数据

问题描述

我的代码是关于带有书籍列表的 bookStore。

我需要从 JSON 文件中提取所有数据（书籍）并将它们放在 cardView 中。

我的代码在那里工作我没有收到任何错误，但数据没有在网页中提取或打印。

有一个 index.html 构建了页面，我还在其中编写了 cardView 代码。

index.js 类

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文件数据示例 

{
    "_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"
    ]
  },

我的代码有什么问题？

标签： javascripthtmlapiweb

解决方案

来自mocky io的 json我测试以防万一无法使用相同的模拟另一个json并更改url：

[
  {
    "id": 777,
    "thumbnailUrl": "https://parismatch.be/app/uploads/2018/04/Macaca_nigra_self-portrait_large-e1524567086123-1100x715.jpg",
    "title": "balabla",
    "shortDescription": "jijiji"
  }
]

我尝试了fetech然后我改为axios，我更正了一些 html 标签，如：

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

至 

<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>

推荐阅读