从外部api迭代对象
从外部api迭代对象
提问于 2020-12-18 17:37:31
我是Javascript的初学者，我想做一个可以显示外部API结果的应用程序。我尝试了下面的代码，但我总是在控制台中得到错误，告诉我forEach不是一个函数。我知道我是在object中接收数据的。我尝试了map()和for iteraton，但什么都没有。任何帮助都会得到认可。
document.addEventListener("DOMContentLoaded", Mtg);
function Mtg() {
fetch("https://api.magicthegathering.io/v1/cards")
.then((res) => res.json())
.then((cards) => {
let output = "";
cards.forEach((key,value) => {
output += `
<div>${card.name}</div>
<div>${card.imageUrl}</div>
`
});
console.log(cards);
document.getElementById("mtgCardsContainer").innerHTML = output;
});
}回答 3
Stack Overflow用户
回答已采纳
发布于 2020-12-18 18:00:41
你有卡片作为一个对象，你需要的是在这个对象里面。输出部分也是错误的，你没有card变量。所以,
function Mtg() {
fetch("https://api.magicthegathering.io/v1/cards")
.then((res) => res.json())
.then(({cards}) => { // destruct cards from object
let output = "";
cards.forEach((card) => {
output += `
<div>${card.name}</div>
<div>${card.imageUrl}</div>
`
});
document.getElementById("mtgCardsContainer").innerHTML = output;
});
}Stack Overflow用户
发布于 2020-12-18 18:25:52
你的逻辑是正确的，你只是稍微偏离了回答的正确部分……
当您发出fetch请求时，您将返回一个JSON对象。您已选择将该对象命名为卡片。
在本例中，JSON对象返回一个已命名为‘card’的对象，该对象本身包含一个也称为card的数组，因此为了访问该数组，您需要以以下对象为目标：
cards.cards.forEach((item, index) => {
console.log(item)
});为了使您的代码更具可读性和更少混淆，您可能希望更改与返回的JSON对象相关的卡片变量的名称。
.then((data) => {
let output = "";
data.cards.forEach((item, index) => {
console.log(item)
output += `
<div>${item.name}</div>
<div>${item.imageUrl}</div>
`
});
...
});Stack Overflow用户
发布于 2020-12-18 19:12:38
做了一些重构并添加了一些注释。祝你好运：
/**
*
* @param card {Object}
* @returns {string} as HTML
*/
const cardTemplateHTML = (card) => {
return `
<div>${card.name}</div>
<div>${card.imageUrl}</div>
`
};
/**
*
* @param cards {Object}
*/
const renderCards = ({cards}) => { /*
note: your currently inject the object data that contains cards. So by using the modern syntax { cards }
you don't have to write 'const {cards} = data' or 'const cards = data.cards'
*/
const mtgCardsContainer = document.getElementById("mtgCardsContainer");
//generate HTML
const cardsHTML = cards.map(card => {
//generete the HTML for every entry
return cardTemplateHTML(card)
})
//merge the list together into one string
.join('');
//update DOM
mtgCardsContainer.innerHTML = cardsHTML;
}
const Mtg = () => {
// make fetch promise
fetch("https://api.magicthegathering.io/v1/cards")
//fetch result, returns new promise
.then((res) => res.json())
//fetch result, returns the rendered json data
.then((data) => renderCards(data)); /* return data example: data = { cards } */
}
//Load
document.addEventListener("DOMContentLoaded", Mtg);<div id="mtgCardsContainer">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65354657
复制相关文章
相似问题
腾讯云开发者
