---
# System prepended metadata

title: "\U0001F3C5 Day 29 - API 資料渲染"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 29 - API 資料渲染

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


問題
---
請同學嘗試用 axios 串接這個 [API](https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json)，並依照要求將資料呈現於以下 HTML 模板

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


```htmlembedded=
<p id="targetName"></p>
<img id="targetImg" src="" alt="sakura image">
<p id="targetArea"></p>
```



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 

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

axios.get('https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json')
  .then(function (response) {
    targetName.textContent = response.data[0].name;
    targetImg.setAttribute('src', response.data[0].imgUrl);
    targetArea.textContent = response.data[0].area;
  }); 
-->




回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01  | voke  | [CodePen](https://codepen.io/FiSi-the-lessful/pen/MWNOJEP) | 
| 02  | 泊岸  | [CodePen](https://codepen.io/qoq77416416/pen/jOgpgRB?editors=1011) | 
| 03  | Jainee  | [CodePen](https://codepen.io/Jainee0110/pen/xxvyryV) | 
| 04  |  tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/YzmJxWe) | 
| 05  | 睿睿  | [CodePen](https://codepen.io/uwmrsusb-the-solid/pen/VwoEzMx?editors=1010)|
| 06  | Hedwig | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/jOgeGOM?editors=0011) | 
| 07  | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/QWeZMRy) |
| 08 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/VwoEzOV) |
| 09 | Mos | [CodePen](https://codepen.io/mos25399/pen/ExqdbwY?editors=1010) | 
| 10 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/LYwgOZV) |
| 11 | Lobinda | [CodePen](https://codepen.io/Lobinda/pen/abeRLLR)|
| 12 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/abeREZp) |
| 13 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/XWvxzvm?editors=1011) | 
| 14 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/poMxpZg) | 
| 15 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/VwoEQJY?editors=1011) | 
|  16   |    kun._c8_shake_it   | [CodePen](https://codepen.io/barry91205/pen/BaXqxPe?editors=0002) | 
|  17   |   chris    | [CodePen](https://codepen.io/chris-chen-the-selector/pen/KKOGBPo) | 
|  18   |   brucelee0629    | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/XWvxYxP) | 
|  19   |   jimmy.0706    | [CodePen](https://codepen.io/JimmyMao/pen/KKOGxyw?editors=1111) | 
|  20   |     Celine  | [CodePen](https://codepen.io/szuning/pen/gOVBdpK?editors=1111) | 
|  21  |    610   | [CodePen](https://codepen.io/YI-LING-LIU/pen/NWQOOVg) | 
|   22   |   Ariel    | [CodePen](https://codepen.io/ariel0510/pen/BaXqapJ?editors=1010) |
|   23   |   Sonia    | [CodePen](https://codepen.io/YUJOU/pen/gOVBQqo?editors=1111) |
|   24   |   嚼勁先生    | [CodePen](https://codepen.io/James520284/pen/ZEgqVKb) |
|   25  |  .tsz_ying  | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/LYwgMjz?editors=1111) |
| 26 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/RwXeObj) |
|  27   |   JIA    | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/PoMygBV?editors=1111) |
|  28   |   kaka_945    | [CodePen](https://codepen.io/kay945/pen/jOgepNZ) | 
| 29 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/ExqOaVK) |
| 30 | Mike | [CodePen](https://codepen.io/mike2049/pen/poMQjpx?editors=1111) |
| 31 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/qBeQRmW) |
| 32 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/wvVQGPM) |
| 33 |邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/RwXqYEB?editors=1111)|
|   34  | jerry_66983      | [CodePen](https://codepen.io/Barry-C/pen/wvVQVxR?editors=1010) | 
|  35   |  yuling     | [CodePen](https://codepen.io/yu-ling-peng/pen/oNKJXxd) |
| 36 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/NWQeqgq) | 
| 37 | charlottelee | [CodePen](https://codepen.io/char849/pen/MWNZbpb) |
| 38 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/qBeLmJM?editors=1011) |
| 39 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/KKObQbN?editors=1011) |
| 40 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/ExqrPYz) |
| 41    |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/ZEgwpWw?editors=1111) |
| 42    |  Lotte     | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/LYwqexp?editors=1011) | 
|43|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/bGXzMov?editors=1010)|
| 44 | Glen_69515 | [codePen](https://codepen.io/glenyaochih/pen/YzmgyrM)|
| 45 | ab567ab5 | [codePen](https://codepen.io/WanTzu-Chiang/pen/LYwaROV?editors=1011)|
| 46 | JRz | [codePen](https://codepen.io/JRZHENG/pen/LYwaMZK?editors=1111)|
| 47 | Emma | [CodePen](https://codepen.io/Emma0919/pen/zYgXWzz) | 
|48|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/MWNdaqJ?editors=0011) | 
| 49 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/wvVLGrP?editors=1111) | 
| 50 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/WNVqxJV?editors=1011) | 
| 51 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/azoopOe?editors=1011) | 
| 52 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/dPbbNVp) | 
| 53 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/ogvvWPK) |
| 54 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/emOOyVB) |
| 55 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/GgKzdPL?editors=1011) | 

<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->