从谷歌图书 api 中分离元素
很久以前我没有用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>
js
function 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回答
-
心有法竹
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> -
料青山看我应如是
干净的答案 - 你应该使用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}希望我的回答对你有帮助）
随时随地看视频慕课网APP
相关分类
JavaScript