首頁猿問從外部 api 迭代對象

從外部 api 迭代對象

JavaScript

千萬里不及你 2023-12-14 14:16:06

我是 Javascript 的初學者，我想制作一個應用程序來顯示外部 API 的結果。我嘗試了下面的代碼，但控制臺中總是出現錯誤，告訴我 forEach 不是一個函數。我知道我收到了對象中的數據。我嘗試使用 map() 和 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 回答

慕桂英4014372

TA貢獻1871條經驗獲得超13個贊

你有卡片作為一個對象，而你需要的東西就在這個對象內部。輸出部分也是錯誤的，你沒有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.imageUrl}</div>

});

document.getElementById("mtgCardsContainer").innerHTML = output;

});

}

反對回復 2023-12-14

繁華開滿天機

TA貢獻1816條經驗獲得超4個贊

您的邏輯是正確的，您只是稍微偏離了響應的正確部分......

當您發出 fetch 請求時，您將返回一個 JSON 對象。您已選擇為該對象卡命名。

在本例中，JSON 對象返回一個名為“cards”的對象，該對象本身包含一個也稱為“cards”的數組，因此為了訪問該數組，您需要定位以下內容：

cards.cards.forEach((item, index) => {

console.log(item)

});

為了使您的代碼更具可讀性并減少混亂，您可能希望更改與返回的 JSON 對象相關的卡片變量的名稱......

.then((data) => {

let output = "";

data.cards.forEach((item, index) => {

console.log(item)

output += `

<div>${item.imageUrl}</div>

});

...

});

反對回復 2023-12-14

Smart貓小萌

TA貢獻1911條經驗獲得超7個贊

進行了一些重構并添加了一些評論。祝你好運：

/**

* @param card {Object}

* @returns {string} as HTML

const cardTemplateHTML = (card) => {

return `

<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>

反對回復 2023-12-14

3 回答
0 關注
208 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

從外部 api 迭代對象

從外部 api 迭代對象

3 回答

添加回答