[英]Extract data from a JSON file
My code is about bookStore with list of books. 我的代码是关于bookStore的书籍清单。
I need to extract all data(books) from a JSON file and put them in a cardView. 我需要从JSON文件中提取所有数据(书籍)并将它们放在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.html构建了页面,我还在其中编写了cardView代码。
index.js class 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 file data Example 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"
]
},
What is wrong with my code? 我的代码出了什么问题?
json from mocky io i test with in case not working mock another one with the same json
and change the url
: json来自mocky io我测试以防万一不能使用相同的
json
模拟另一个并更改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: 我尝试使用
fetech
然后我改为axios
,我更正了一些html标签,如:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.