大家好,我正在嘗試制作一個簡單的專案,該專案從 API 獲取一些書籍資訊并將它們顯示為<li>
元素,但是當我在地圖函式中回傳它們時,反引號會在網頁上顯示,有什么幫助嗎?
JS:
function mapToList(json){
const booksArray = json.works;
return booksArray.map((book, n) => {
let {title} = book;
let authors = getAuthorsArray(book)
return `<li class="book-card" id=${n}>
<h2>${title}</h2>
<p>${authors}</p>
</li>`
}
)
}
html
<body>
<section class="main center">
<h1 id="welcome">Welcome to the library!</h1>
<div class="searchbar">
<input
type="text"
id="search-field"
placeholder="Search for a category or genere, e.g.: fantasy, action..."
/>
<button id="search-btn">
<img id="search-img" src="/img/icons8-ricerca.svg" alt="Search" />
</button>
</div>
<ul id="books-list"></ul>
</section>
<script type="module" src="/js/main.js"></script>
</body>
另外,如果您對如何制作這種清潔劑有任何建議,我將不勝感激
uj5u.com熱心網友回復:
問題不在于您的反引號,而在于booksArray.map
功能。
- Array.map 總是回傳一個以逗號分隔的陣列。
- 當您呈現資料陣列時,HTML 將添加逗號。
為避免這種情況,只需.join("")
在 map 函式的末尾添加即可。
像這樣 :
return booksArray.map((book, n) => {
// Your return HTML logic
})**.join("")**
希望這可以幫助!
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/504694.html
標籤:javascript html 网络
上一篇:CountApi回傳未定義的回應