[學習筆記] fetch API －金曲獎名單

#learning

JavaScript

JavaScript 博大精深，尤其是串接 API，可說是前端工程師的必備技能，而其中可能會面對到的狀況又很多，像是 CORS 要怎麼解決、東西要怎麼撈出來等等，對新手來說真的是挑戰 😓

／／此練習是透過文化部影視及流行音樂產業局提供的 JSON，使用 fetch 串接／／

完整的 HTML

完整的 JavaScript

以下會針對 JS 的部分解說

fetch 的起手式

fetch(" API網址 ")
  .then((response) => {
    // 成功抓到的話，會有response
    const data = response.json(); // 宣告一個 data 常數，指向 json 化的 response
    return data;
  })
  .then((data) => {
    console.log(data);
  });

跑 for 迴圈撈資料

for (let i = 0; i < data.length; i++) {
  let newRecord = document.createElement("div"); // 宣告變數，新增一個 div
  newRecord.className = "infoMovie"; // 幫這個新增的 div 加 class，以利之後加 css
  document.querySelector(".record-list").appendChild(newRecord);
  // .record-list 是在 HTML 上的，把 newRecord 加在那邊

  let newRecordInfo = ` 宣告一個變數
    <a href="${data[i].PageUrl}" target="_blank">
    <h3>${data[i].Subject}</h3></a>
  `; // 把 h3 放在 a 裏面，透過點擊 h3 標題，可以連到該網址查看名單
  newRecord.innerHTML = newRecordInfo; // 剛剛新增的 div 的內容就是這些囉！
}