首頁猿問從谷歌圖書 api 中分離元素

從谷歌圖書 api 中分離元素

JavaScript

冉冉說 2022-06-09 11:22:12

很久以前我沒有用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>

</div>

content.appendChild(book)

});

}

</div>

反對回復 2022-06-09

料青山看我應如是

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

}

希望我的回答對你有幫助）

反對回復 2022-06-09

2 回答
0 關注
121 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從谷歌圖書 api 中分離元素

從谷歌圖書 api 中分離元素

2 回答

添加回答