---
# System prepended metadata

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

---

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

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


問題
---
請同學嘗試用 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 / 答案                                  |
|:---------------------:|:--------------------------------------------------------------------------------:|
|      嗶嗶羊#8042      |       [Codepen](https://codepen.io/mazizlte-the-typescripter/pen/MWXpeXb)        |
|    hsiung阿熊#4079    |               [Codepen](https://codepen.io/hsiungchi/pen/oNyBKLO)                |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 |       [CodePen](https://codepen.io/Connie-Chien/pen/ExRZqPp?editors=0011)        |
|      albee#9121       |        [Codepen](https://codepen.io/albee-chang/pen/abKpeNa?editors=1111)        |
|       薯餅#3581       |             [Codepen](https://codepen.io/ColdingPoTaTo/pen/eYKgqzM)              |
|       RJRS#9430       |                  [CodePen](https://codepen.io/RJRS/pen/mdKRNeb)                  |
|       威爾#1694       |                [CodePen](https://codepen.io/WILL_Wu/pen/bGKgXBB)                 |
|        YC#2522        |                  [CodePen](https://codepen.io/YCLu/pen/zYaKyRO)                  |
|       無名#6427       |                [CodePen](https://codepen.io/Nomoney/pen/MWXJNwE)                 |
|     AuroraC#6539      |          [codepen](https://codepen.io/AuroraC/pen/YzvNmwo?editors=1111)          |
|    jimmyFang#9575     |         [codepen](https://codepen.io/pohxiqqo/pen/LYrxwjo?editors=0110)          |
|       圈圈#4060       |           [codepen](https://codepen.io/wjejfczn-the-bold/pen/wvXgVJo)            |
|     kenki100#0068     |                 [Codepen](https://codepen.io/ken100/pen/qBKRePw)                 |
|       柔柔#1716       |                [Codepen](https://codepen.io/rouchen/pen/QWxdeZa)                 |
|       Wei#2330        |       [Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/rNKjXvq)        |
|      Eileen#6454      |               [Codepen](https://codepen.io/Eileen-io/pen/XWYpvEy)                |
|       m_m#5493        |               [CodePen](https://codepen.io/minnn7716/pen/eYKgqbQ)                |
|       Yiru#0236       |          [Codepen](https://codepen.io/yiru94/pen/RwJKXYa?editors=1011)           |
|     CloThEs#7837      |                [Codepen](https://codepen.io/CloThEsZ/pen/rNKjXKq)                |
|      azami#5986       |                 [Codepen](https://codepen.io/azami/pen/mdKRNYO)                  |
|      CofCat#9226      |               [Codepen](https://codepen.io/cofcat456/pen/poKRMXZ)                |
|    LHchien33#6232     |               [Codepen](https://codepen.io/lin_chien/pen/RwJpbwo)                |
|       kuku#3118       |              [Codepen](https://codepen.io/mengting-ku/pen/PoapYzJ)               |
|      楓之聲#6945      |               [Codepen](https://codepen.io/sshane258/pen/vYrxBGg)                |
|      Clara#1275       |                [Codepen](https://codepen.io/bsupixqu/pen/RwJpbWK)                |
|    出示了阿伯#9923    |        [Codepen](https://codepen.io/BradpittLai/pen/BaVWBjJ?editors=1011)        |
|       威0#6919        |        [Codepen](https://codepen.io/n0918679182/pen/JjZWPRY?editors=1011)        |
|       mou#2215        |       [Codepen](https://codepen.io/shihchiehlan/pen/bGKqbvx?editors=1010)        |
|      JackC#0411       |                [Codepen](https://codepen.io/key0329/pen/eYKvOBa)                 |
|      amy芳#1385       |               [Codepen](https://codepen.io/amy-chieng/pen/dyKvbqR)               |
|       小白#2406       |               [CodePen](https://codepen.io/gracewhite/pen/BaVQwyV)               |
|      Hazel.#6020      |        [Codepen](https://codepen.io/Hazelhsieh/pen/BaVWBYV?editors=1011)         |
|      Lucie#3831       |                [Codepen](https://codepen.io/bisespei/pen/poKRMxV)                |
|      法希娜#3206      |   [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/MWXpgzg?editors=1111)    |
|      Hilda#7085       |           [Codepen](https://codepen.io/vwquikad-the-vuer/pen/qBKrWLr)            |
|       萱仔#0781       |        [Codepen](https://codepen.io/ting-hsuan/pen/KKeaoLW?editors=1010)         |
|      yawun#0042       |               [CodePen](https://codepen.io/monicalin/pen/JjZWjjN)                |
|      yawun#0042       |               [CodePen](https://codepen.io/monicalin/pen/JjZWjjN)                |
|       Peng#9811       |                [CodePen](https://codepen.io/peng-027/pen/NWzpWqV)                |
|      黑白兔#0684      |               [CodePen](https://codepen.io/johnny329/pen/gOKmYwG)                |
|       雷雷#7844       |               [CodePen](https://codepen.io/lei-yi-jie/pen/ZEReYba)               |
|    JustinLiu#9699     |        [CodePen](https://codepen.io/justin0227/pen/NWzpPPr?editors=1011)         |
|      Loran#1105       |                [CodePen](https://codepen.io/loranlin/pen/qBKrEOQ)                |
|     PayRoom#8328      |               [CodePen](https://codepen.io/water38198/pen/KKeWwgq)               |
|      王懷英#7271      |                [CodePen](https://codepen.io/huaiying/pen/XWYMrzW)                |
|    Potatolee#7749     |        [CodePen](https://codepen.io/potatoleee/pen/jOKBEPB?editors=1111)         |
|      Yishan#4902      |   [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/bGKqNpw?editors=1010)   |
|     WEI_RIO#9342      |          [Codepen](https://codepen.io/wei_wu/pen/ExRWxYN?editors=1111)           |
|     RyanTsai#8906     |                [CodePen](https://codepen.io/linlaose/pen/mdKWyGP)                |
|      Chung#5951       |          [CodePen](https://codepen.io/yuju16/pen/OJEpPRM?editors=1011)           |
|       Ron Liang       |                 [CodePen](https://codepen.io/ron-go/pen/abKJzee)                 |
|       yumy#1940       |                [CodePen](https://codepen.io/yumyyang/pen/ZEReYpr)                |
|       Vera#5592       |                 [CodePen](https://codepen.io/skvera/pen/PoapqzJ)                 |
|    Cookie SSS#6991    |   [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/YzvZXOx?editors=1011)   |
|      Winnie#1306      |      [Codepen](https://codepen.io/WinnieWuWinnie/pen/oNyZXJW?editors=1010)       |
|   jacky010080#0880    |       [CodePen](https://codepen.io/Yen-Jung-Chen/pen/wvXJKJb?editors=0001)       |
|    masterYan#2480     |    [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/vYrxOmm?editors=1011)    |
|     beta lin#1445     |                [CodePen](https://codepen.io/linbeta/pen/VwdpvOg)                 |
|      hannah#2224      |         [CodePen](https://codepen.io/hangineer/pen/qBKrOMY?editors=0000)         |
|     Jenny真#7532      |        [CodePen](https://codepen.io/wei-chen-wu/pen/xxzqZPM?editors=0010)        |
|     Hironaka#7367     |              [CodePen](https://codepen.io/Hironaka0815/pen/gOKmPor)              |
|    shinyhung#3825     |         [CodePen](https://codepen.io/sean_1215/pen/RwJprJW?editors=1111)         |
|      Benson#6763      |                [Codepen](https://codepen.io/kumashow/pen/jOKBWeY)                |
|     banazita#5143     |         [CodePen](https://codepen.io/banazita/pen/YzvZqyG?editors=1111)          |
|      心幻羽#0056      |        [CodePen](https://codepen.io/linglingsyu/pen/VwdPzGe?editors=1111)        |
|       芮綺#5224       |          [CodePen](https://codepen.io/zhan70/pen/XWYMdEJ?editors=1111)           |
|      SASIMI#5099      |              [codepen](https://codepen.io/sashimi1327/pen/NWzGJBe)               |
|    jackson204#6363    |               [codepen](https://codepen.io/jackson204/pen/bGKqeKG)               |
|     Joy1712#4670      |          [codepen](https://codepen.io/Joy1712/pen/dyKvXBw?editors=1011)          |
|    勁辣雞腿寶#5817    |         [Codepen](https://codepen.io/orz311013/pen/rNKyLXY?editors=1010)         |
|    Ruby Chen#7452     |         [codepen](https://codepen.io/ruby92429/pen/dyKvXmj?editors=1011)         |
|       蓁心#6229       | [codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/wvXJzqo?editors=1011) |
|     RayChen#6088      |              [codepen](https://codepen.io/raychen1996/pen/VwdpKBw)               |
|    Sentiments#4883    |        [codepen](https://codepen.io/Sentiments/pen/XWYMjQO?editors=1011)         |
|      粉蒸肉#6214      |         [codepen](https://codepen.io/wrightyu/pen/mdKWRVj?editors=1011)          |
|   William Lai#0196    |               [codepen](https://codepen.io/lai-weihan/pen/xxzgLvb)               |
|       大衛#4869       |         [codepen](https://codepen.io/exnsrpjc/pen/gOKgVdL?editors=1010)          |
|       Data#9297       |               [codepen](https://codepen.io/kirakira72/pen/mdKRNPd)               |
|      黃士桓#7654      |             [codePen](https://codepen.io/shr-huan-huang/pen/WNypEMj)             |
|      肉桂卷#0625      |          [codePen](https://codepen.io/ginnlee/pen/dyKvzXr?editors=1011)          |
|     kancheng#3915     |                [CodePen](https://codepen.io/kancheng/pen/MWXpOqb)                |
|       Jill#5577       |                [CodePen](https://codepen.io/Jillkate/pen/PoapOeg)                |
|    suihsilan#9485     |         [CodePen](https://codepen.io/suihsilan/pen/XWYMYjw?editors=1010)         |
|      Kimi #9564       |                [CodePen](https://codepen.io/kimihu91/pen/VwdKgpQ)                |
|    xherobruce#6826    |        [CodePe5](https://codepen.io/winwinbruce/pen/GRGWYGM?editors=1111)        |
|      Cliff#4606       |         [Codepen](https://codepen.io/Cliff_hex/pen/gOKmQjE?editors=1011)         |
|    Yuna Huang#2692    |         [Codepen](https://codepen.io/Yuna1002/pen/jOKBdBp?editors=1010)          |
|       末次#0236       |                [Codepen](https://codepen.io/yunjulee/pen/mdKWoKQ)                |
|        YI#0863        |          [Codepen](https://codepen.io/YI0305/pen/JjZWzVL?editors=1012)           |
|      Mylène#2481      |              [Codepen](https://codepen.io/hamajibashi/pen/PoapgPY)               |
|     Amberhh#2465      |                [Codepen](https://codepen.io/Amberhh/pen/MWXJNEV)                 |
|     FiReBrO#0557      |               [Codepen](https://codepen.io/firebro42/pen/mdKWgxy)                |
|   Ryan Chiang#6649    |               [Codepen](https://codepen.io/ryanchiang/pen/yLEbNWW)               |
|       yen #5757       |       [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=1010)       |
|       yoyo#1003       |       [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/rNKmzYp)        |
|    0xWilliam #8796    |             [CodePen](https://codepen.io/0xWilliam0322/pen/poKPWwZ)              |
|     Tuhacrt#0008      |                [codepen](https://codepen.io/Tuhacrt/pen/MWXmEvP)                 |
|        Rr#2215        |              [Codepen](https://codepen.io/rufangcheng/pen/wvXdOyR)               |
|     我是泇吟#5189     |                [CodePen](https://codepen.io/kljuqbxs/pen/XWYRzNX)                |
|      Cream#3449       |   [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/rNKmPmo?editors=1111)    |
|       鑫鑫#4346       |         [CodePen](https://codepen.io/Neil1024/pen/LYryvWB?editors=1011)          |
|     KC_8685#9343      |               [Codepen](https://codepen.io/cathy7411/pen/YzvZyRd)                |
|         yaru#6308              |      [CodePen](https://codepen.io/lszaietc/pen/eYKWxpj)                                                                            |
|竹輪#3335|                [CodePen](https://codepen.io/chikuwa0120/pen/OJEggVz)                |
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/wvXeqrv?editors=1111)|
|shio#1414|[codepen](https://codepen.io/shioyen/pen/XWYgzoK?editors=1011)|
|  cbs#9007  |[Codepen](https://codepen.io/wasdjk/pen/yLEXbdG)|
|Silvialu#4521|[Codepen](https://codepen.io/Silvia091640/pen/OJEmdox)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/abKwYJv?editors=0011)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/MWXvwjO)|
|安o#2448|[Codepen](https://codepen.io/JzhenAn/pen/poKrEJo?editors=1010)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/yLEoXaQ?editors=1010)|
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/OJEjBON?editors=1011)|
|charlottelee849#0366|[Codepen](https://codepen.io/charlotte-lee/pen/jOKLegZ?editors=0010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/ZERJNXv?editors=0011)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/JjZrYbP)|
|Lou#0085|[Codepen](https://codepen.io/Lusie_H/pen/ZERXWZR?editors=0011)|
|健育#5748|[Codepen](https://codepen.io/c1317156/pen/PoaJxLO)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/MWXOpZw)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/QWxOYeG)|
|Baozi#2042|[CodePen](https://codepen.io/lillianyu/pen/jOKYQOM)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/oNypRmy?editors=1011)|
|pss940909#8650|[CodePen](https://codepen.io/pss940909/pen/QWxQKez?editors=1011)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/LYrQLga?editors=1011)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/MWXQOKJ)|
|阿風#6890|[CodePen](https://codepen.io/Afonguwu/pen/RwJMVey)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/XWYqxev)|
|Greta#0837|[CodePen](https://codepen.io/gretali/pen/yLEELRO)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/gOKKEed?editors=1111)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/dyKqpoJ)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/oNyPejG?editors=1111)|
三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/MWXZxPG?editors=1111)|
Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/jOKdawV?editors=1010)|
Ringo#7583|[CodePen](https://codepen.io/ringolai1988/pen/rNKPQZd?editors=1010)|
阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/qBKgJoX?editors=1011)|
samger#0808|[CodePen](https://codepen.io/lee-wei-hong/pen/wvXOqoJ)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/JjaGmrM?editors=1111)|
