从外部 api 迭代对象

Question

我是 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;

    });

}

Answer 1

你有卡片作为一个对象，而你需要的东西就在这个对象内部。输出部分也是错误的，你没有card变量。所以，function Mtg() {&nbsp; fetch("https://api.magicthegathering.io/v1/cards")&nbsp; &nbsp; .then((res) => res.json())&nbsp; &nbsp; .then(({cards}) => { // destruct cards from object&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; let output = "";&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; cards.forEach((card) => {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; output += `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>${card.name}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>${card.imageUrl}</div>&nbsp; &nbsp; &nbsp; &nbsp; `&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; document.getElementById("mtgCardsContainer").innerHTML = output;&nbsp; &nbsp; });}

Answer 2

您的逻辑是正确的，您只是稍微偏离了响应的正确部分......当您发出 fetch 请求时，您将返回一个 JSON 对象。您已选择为该对象卡命名。在本例中，JSON 对象返回一个名为“cards”的对象，该对象本身包含一个也称为“cards”的数组，因此为了访问该数组，您需要定位以下内容：cards.cards.forEach((item, index) => {&nbsp;console.log(item)});为了使您的代码更具可读性并减少混乱，您可能希望更改与返回的 JSON 对象相关的卡片变量的名称.......then((data) => {&nbsp; &nbsp; &nbsp;&nbsp; let output = "";&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; data.cards.forEach((item, index) => {&nbsp; &nbsp;console.log(item)&nbsp; &nbsp; output += `&nbsp; &nbsp; &nbsp; <div>${item.name}</div>&nbsp; &nbsp; &nbsp; <div>${item.imageUrl}</div>&nbsp; &nbsp; `&nbsp; });&nbsp; ...});

Answer 3

进行了一些重构并添加了一些评论。祝你好运：/**&nbsp;*&nbsp;* @param card {Object}&nbsp;* @returns {string} as HTML&nbsp;*/const cardTemplateHTML = (card) => {&nbsp; return `&nbsp; &nbsp; <div>${card.name}</div>&nbsp; &nbsp; <div>${card.imageUrl}</div>&nbsp; `};/**&nbsp;*&nbsp;* @param cards {Object}&nbsp;*/const renderCards = ({cards}) => { /*&nbsp; &nbsp; &nbsp; note: your currently inject the object data that contains cards. So by using the modern syntax { cards }&nbsp; &nbsp; &nbsp; you don't have to write 'const {cards} = data' or 'const cards = data.cards'&nbsp; &nbsp; &nbsp; */&nbsp; const mtgCardsContainer = document.getElementById("mtgCardsContainer");&nbsp; //generate HTML&nbsp; const cardsHTML = cards.map(card => {&nbsp; &nbsp; //generete the HTML for every entry&nbsp; &nbsp; return cardTemplateHTML(card)&nbsp; })&nbsp; &nbsp; &nbsp; //merge the list together into one string&nbsp; &nbsp; &nbsp; .join('');&nbsp; //update DOM&nbsp; mtgCardsContainer.innerHTML = cardsHTML;}const Mtg = () => {&nbsp; // make fetch promise&nbsp; fetch("https://api.magicthegathering.io/v1/cards")&nbsp; &nbsp; &nbsp; //fetch result, returns new promise&nbsp; &nbsp; &nbsp; .then((res) => res.json())&nbsp; &nbsp; &nbsp; //fetch result, returns the rendered json data&nbsp; &nbsp; &nbsp; .then((data) => renderCards(data)); /* return data example: data = { cards } */}//Loaddocument.addEventListener("DOMContentLoaded", Mtg);<div id="mtgCardsContainer"></div>