---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 29 - API 資料渲染

### axios - 將外部資料渲染到網頁上
延續 [昨日的每日任務](https://hackmd.io/9QaJQ4q2SYyqSmzdNBOGtA)，今天是將串接回來的資料渲染於網頁畫面的練習。

問題
---
請同學嘗試用 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 標籤內。

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

## 回報流程

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


<!-- 解答：

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 / 答案 |
|:---------------------:|:--------------------------------------------------------------------------------:|
|Joy-chiang|[codepen](https://codepen.io/fwysphbw-the-vuer/pen/ExrwpLK?editors=1010)|
|JUNEW|[codepen](https://codepen.io/June-W/pen/YzBEqZm)|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/rNPYWVp)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/xxMPRVa)|
|runweiting|[CodePen](https://codepen.io/weiting14/pen/eYxeBBV)|
|Allen|[CodePen](https://codepen.io/hlctw/pen/XWOzNaB?editors=1111)|
|yuan!|[CodePen](https://codepen.io/townyuan/pen/vYbWyjO)|
|yuling|[Codpen](https://codepen.io/igzdflpu/pen/WNPXoGR)|
|CPing|[CodePen](https://codepen.io/CPing/pen/rNPYjaR)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/ExrbZaB)|
|lychee_kk|[CodePen](https://codepen.io/kakakala/pen/KKJXyvY)|
|Winnie|[CodePen](https://codepen.io/codepen-io-winnie/pen/bGzYgEL?editors=1010)|
|Helen|[CodePen](https://codepen.io/milkteamonster/pen/PoVOWrB?editors=1010)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/PoVOWMd)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/yLZPMNy) |
| yuan2781 |[CodePen](https://codepen.io/ismebir/pen/oNmoZLo)|
| cest_jessie |[CodePen](https://codepen.io/itsjessiechen/pen/BaMwexW)|
|風羽|[CodePen](https://codepen.io/Joy-Huang/pen/Vwgrpzd?editors=1010)|
|Chia Pin|[CodePen](https://codepen.io/joker-cat/pen/bGzYqMb)|
|Yijing|[CodePen](https://codepen.io/Yi-Jing-71080635/pen/ExrbmyR?editors=0010)|
|ming0712|[CodePen](https://codepen.io/StevenHuang/pen/RwvjVjN?editors=1010)|
|Peng|[CodePen](https://codepen.io/H-Peng/pen/YzBEVJX)|
|Alyce|[CodePen](https://codepen.io/alycehwy/pen/wvNPdRd)|
|phyllis|[CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/oNmoWrg)|
|claire|[CodePen](https://codepen.io/yi-wen-chen/pen/VwgrWwe)|
|stone4584|[CodePen](https://codepen.io/Royen0506/pen/gOqXRGX)|
|Uli|[CodePen](https://codepen.io/uli1313/pen/LYqOLXx?editors=0011)|
|dora|[CodePen](https://codepen.io/dorayu/pen/mdvqMRG?editors=1011)|
|kawa|[CodePen](https://codepen.io/z83xji6/pen/KKJyqLj?editors=1010)|
|Fabio20|[CodePen](https://codepen.io/fabio7621/pen/PoVOKJL)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/PoVOOKO)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/YzBEYZL?editors=1111)|
|荷菓かのり|[CodePen](https://codepen.io/oogxwkvw-the-builder/pen/MWLOQOr?editors=1111)|
|Rogan|[CodePen](https://codepen.io/RoganHsu/pen/NWowyBj)|
|維哲|[CodePen](https://codepen.io/kwz1202/pen/ExrwQRJ)|
|yu.t_liu|[CodePen](https://codepen.io/YuT200053/pen/JjxOMLM?editors=1010)|
|xin|[CodePen](https://codepen.io/Estherrrrrr999/pen/YzBrLob)|
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/rNPYrXV?editors=1010)|
|Ching|[CodePen](https://codepen.io/tzuchingg/pen/bGzYopp?editors=1010)|
|Mattie|[CodePen](https://codepen.io/mattielin/pen/BaMmbRm?editors=1011)|
|hsu0921|[CodePen](https://codepen.io/HSUANIN0327/pen/XWOVXKX)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/QWYaNwy?editors=1011)|
|shcopy|[CodePen](https://codepen.io/shcopy/pen/ZEwvWrv)|
|RX00|[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/jOdYqxm?editors=1011)|
|保羅|[CodePen](https://codepen.io/paul-1997/pen/wvNpJmZ?editors=1011)|
|SHUO|[CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/zYepzmO)|
|gebyman|[CodePen](https://codepen.io/gebyman/pen/YzBYGaL?editors=1010)|
|奔跑吧(GTR150)|[CodePen](https://codepen.io/Wer-Qwe/pen/PoVEJjo?editors=1111)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/eYxRedZ)|
|⭐️小正|[CodePen](https://codepen.io/colorgolden/pen/MWLrLYj?editors=1111)|
|jamesli_92837|[CodePen](https://codepen.io/kfovdlln-the-reactor/pen/LYqeKYo)|
|Oria|[CodePen](https://codepen.io/kajing/pen/wvNyBpQ?editors=0011)|
|小夏|[CodePen](https://codepen.io/michaelhsia/pen/eYxVZyE)|
|davidtt|[CodePen](https://codepen.io/David-Tsai/pen/BaMYzoL?editors=1011)|
|MY|[CodePen](https://codepen.io/ahmomoz/pen/vYbdXdp)|
|tanuki5863|[CodePen](https://codepen.io/tanuki320/pen/rNPpRvR?editors=1011)|
|damon0323|[CodePen](https://codepen.io/swk9eny2/pen/RwvQQQd?editors=1011)|
|xuan|[CodePen](https://codepen.io/xuan0915/pen/VwgQxyW?editors=1011)|
|依依|[CodePen](https://codepen.io/Rita-Yang/pen/VwgQBQY?editors=1011)|
| Eden |[Codepen](https://codepen.io/iseden/pen/RwvQEPp)|
| Vivian2857 |[Codepen](https://codepen.io/vivian_lin/pen/KKJQOpx?editors=1111)|
| ChrisSQR |[Codepen](https://codepen.io/ChrisSQR/pen/MWLQMxP)|
| Jerry |[CodePen](https://codepen.io/ildkosxk-the-encoder/pen/KKJRwmB?editors=1010)|
| 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/GRzdjBv)|
| santu0868 |[Codepen](https://codepen.io/HatsumiSan/pen/Rwvyapy)|
| Lainie |[Codepen](https://codepen.io/Lainie88/pen/BaMxxjW?editors=1010)|
| nini1202desu |[Codepen](https://codepen.io/tvxq5206/pen/abXjwrY?editors=1011)|
| Iris |[Codepen](https://codepen.io/iris831206/pen/vYbaJGq?editors=1111)|
| macihuang |[Codepen](https://codepen.io/macy1215/pen/MWLqYKm)|
| bf_tsai |[Codepen](https://codepen.io/BF-Tsai/pen/VwgGLav?editors=0011)|
| NathanJames |[Codepen](https://codepen.io/ufo060204/pen/OJdBMVY)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/GRzYQxj)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/YzBJmVO?editors=1010)|
|Daylily|[Codepen](https://codepen.io/daylily/pen/OJdajmq)|
|Andy|[Codepen](https://codepen.io/andy31342/pen/zYeMyyd?editors=1011)|
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/WNPLajw)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/qBgQLXP) |
| sponge | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/NWoovwe?editors=1111) |
| JasonFu | [Codepen](https://codepen.io/jie-Fu/pen/WNPVBMz?editors=1111) |