很久以前我没有用javascript编程所以我决定做一个“书柜”的项目来管理阅读的书籍并且我想阅读更多我对如何分离元素以个性化风格有困难因为它在一个 div 中选择了 api 的所有结果。html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="script.js"></script> <link rel="stylesheet" href="./css/bookcase.css"> <title>project</title></head><body> <div id="content"> </div> <script src="https://www.googleapis.com/books/v1/volumes?q=clean+code&callback=handleResponse></script></body></html>jsfunction handleResponse(response) { for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; var book = document.getElementById('content') book.innerHTML += "<br>" + '<img src=' + response.items[i].volumeInfo.imageLinks.thumbnail + '>'; book..innerHTML += "<br>" + item.volumeInfo.title; book..innerHTML += "<br>" + item.volumeInfo.authors;
2 回答
心有法竹
TA贡献1866条经验 获得超5个赞
function handleResponse(obj) {
const container = document.getElementById("container")
obj.items.forEach((rec, index) => {
let singleBookCover =
rec.volumeInfo.imageLinks && rec.volumeInfo.imageLinks.smallThumbnail;
let singleBookTitle = rec.volumeInfo.title;
let singleBookAuthor = rec.volumeInfo.authors[0];
let book = document.createElement("div");
book.className = "book"
book.innerHTML = `
<div><h1>${singleBookTitle}<h1>
<p>${singleBookAuthor}</p>
<img src="${singleBookCover}"></img>
</div>
`
content.appendChild(book)
});
}
<div id="content" class="books">
</div>
<script src="https://www.googleapis.com/books/v1/volumes?q=clean+code&callback=handleResponse"></script>
料青山看我应如是
TA贡献1772条经验 获得超8个赞
干净的答案 - 你应该使用document.appendChild(child)而不是 innerHTML 方法。
此外，最近添加的 js 方法很少，可以帮助您操作大型 JSON 对象 - map、reduce、filter。
我添加了示例，如何将原始对象清理为更小的数组，并将该数组中的项目插入 html-page。
function demo (obj) {
// getting all items from object
const book = Object.keys(obj).map(item => obj['items']).reduce(
(acc,rec, id, array) => {
// getting Cover, Title, Author from each item
let singleBookCover = rec[id].volumeInfo.imageLinks.thumbnail;
let singleBookTitle = rec[id].volumeInfo.title;
let singleBookAuthor = rec[id].volumeInfo.authors[0];
// Creating new array only with Cover, Title, Author
return [...acc, {singleBookCover, singleBookTitle, singleBookAuthor}]
},
[]
).forEach( item => {
// For each item on our array, we creating h1
let title = document.createElement('h1');
title.textContent = `${item.singleBookTitle} by ${item.singleBookAuthor}`;
// img
let img = document.createElement('img');
img.src = item.singleBookCover;
img.alt = `${item.singleBookTitle} by ${item.singleBookAuthor}`;
// and div wrapper
let container = document.createElement('div');
// adding our child elements to wrapper
container.appendChild(title).appendChild(img);
// adding our wrapper to body
document.body.appendChild(container);
})
return book
}
希望我的回答对你有帮助）
添加回答
举报
0/150
提交
取消