---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 JS 任務 Day25 - API 資料渲染

### axios - 將外部資料渲染到網頁上
今天是將串接回來的資料渲染於網頁畫面的練習。

問題
---
請同學嘗試用 axios 串接這個 [API](https://data.coa.gov.tw/api/v1/PetLoseList/?Page=1&PetCategory=%E7%8B%97&Gender=%E5%85%AC&LostTime=2023)，並依照要求將資料呈現於以下 HTML 模板

1. 請將 Data 陣列內的第二筆物件，屬性 PetName 所對應的值用 textContent 填入 id 為 targetName 的 p 標籤內。
2. 請將 JSON 陣列資料的第二筆物件，屬性 Picture 所對應的值用 setAttribute 的方式替 id 為 targetImg 的 img 標籤設定 src 屬性。
3. 請將 JSON 陣列資料的第二筆物件，屬性 LostPlace 所對應的值用 textContent 填入 id 為 targetPlace 的 p 標籤內。

<p id="targetName"></p>
<img id="targetImg" src="" alt="sakura image">
<p id="targetPlace"></p>

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：

const targetName = document.querySelector('#targetName');
const targetImg = document.querySelector('#targetImg');
const targetPlace = document.querySelector('#targetPlace');

axios.get('https://data.coa.gov.tw/api/v1/PetLoseList/?Page=1&PetCategory=%E7%8B%97&Gender=%E5%85%AC&LostTime=2023')
.then(function (response) {
targetName.textContent = response.data.Data[1].PetName;
targetImg.setAttribute('src', response.data.Data[1].Picture);
targetPlace.textContent = response.data.Data[1].LostPlace;
});
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 雲漢#5319 | [codepen](https://codepen.io/keon981/pen/zYmVOQv?editors=1011)|
| 2 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/MWPMgZM) |
| 3 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/yLRdLJL) |
| 4 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/oNarNbe) |
| 5 | Billy_Ti#9716 | [Codepen](https://codepen.io/Ti-Show/pen/QWZXWjP?editors=1011) |
| 6 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/dygByMV) |
| 7 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/eYPwYVd) |
| 8 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/vYVqEEP) |
| 9 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/yLRdyBg) |
| 10 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/MWPMwWB?editors=1010) |
| 11 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/vYVqOLG) |
| 12 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/OJBeVjx) |
| 13 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/bGmPdMM) |
| 14 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/GRYbpxw?editors=1010) |
| 15 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/BaqgjGQ)|
| 16 | N0c7iluc3n7#4390 | [Codepen](https://codepen.io/huang-yu-cheng/pen/XWxLdRw) |
| 17 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/jOejqLp) |
| 18 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/WNaqwzK) |
| 19 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/YzJoGwB) |
| 20 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/PoyrGpw) |
|21|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/qBJzNKV?editors=1011)
| 22 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/eYPwvGy) |
| 23 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/mdzZWmN?editors=1111) |
| 24 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/abRgWzx) |
| 25 | Jerry456789#9029 | [Codepen](https://codepen.io/aria198a/pen/poxXyjK?editors=1011) |
| 26 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/rNqEJZE) |
| 27 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/zYmVjrP?editors=0011) |
| 28 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/jOejxay) |
| 29 |PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/XWxLqxY)
| 30 |yoyo#1003|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/WNaqJWj)|
| 31 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/WNaVrLo) |
| 32 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/poxMypK) |
| 33 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/MWPNZxv) |
| 34 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/jOQNqEB?editors=0010) |
| 35 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/XWyrwzY) |
| 36 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/yLQLpOm) |
| 37 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/GRwRXWd) |
| 38 | JasonChang#7847 | [Codepen](https://codepen.io/jsonChangJava/pen/mdQJVjX?editors=1011) |
|39|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/YzRXQvP)|
| 40 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/PoxZaQa) |
| 41 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/MWzggzq?editors=1010) |
| 42 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/GRwMgMZ?editors=1112) |
| 43 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/VwVBoya) |
| 44 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/VwVGQdr) |
| 45 | hoyiiiii | [Codepen](https://codepen.io/hoyii/pen/OPLMaqP?editors=1011) |