第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

從外部 api 迭代對象

從外部 api 迭代對象

千萬里不及你 2023-12-14 14:16:06
我是 Javascript 的初學(xué)者，我想制作一個應(yīng)用程序來顯示外部 API 的結(jié)果。我嘗試了下面的代碼，但控制臺中總是出現(xiàn)錯誤，告訴我 forEach 不是一個函數(shù)。我知道我收到了對象中的數(shù)據(jù)。我嘗試使用 map() 和 iteraton，但沒有任何結(jié)果。任何幫助將不勝感激。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貢獻(xiàn)1871條經(jīng)驗 獲得超13個贊

你有卡片作為一個對象，而你需要的東西就在這個對象內(nèi)部。輸出部分也是錯誤的，你沒有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;

    });

}


查看完整回答
反對 回復(fù) 2023-12-14
?
繁華開滿天機

TA貢獻(xiàn)1816條經(jīng)驗 獲得超4個贊

您的邏輯是正確的，您只是稍微偏離了響應(yīng)的正確部分......


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


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


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

 console.log(item)

});

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


.then((data) => {

     

  let output = "";

      

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

   console.log(item)

    output += `

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

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

    `

  });

  ...

});


查看完整回答
反對 回復(fù) 2023-12-14
?
Smart貓小萌

TA貢獻(xiàn)1911條經(jīng)驗 獲得超7個贊

進(jìn)行了一些重構(gòu)并添加了一些評論。祝你好運：


/**

 *

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


查看完整回答
反對 回復(fù) 2023-12-14
  • 3 回答
  • 0 關(guān)注
  • 225 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號