# 🏅 DAY27 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

axios 串接練習 - get
---
請記得載入 axios 的 CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

#### axios 的 get 語法可以用來取得遠端伺服器的資料

// 在以下 URL 的部分填入 API 網址
axios.get('URL')
    // 如果連接成功，可以用 then() 處理傳回來的值，以下程式碼將回傳結果儲存於 response。
  .then(function (response) {
    	console.log(response);
  });

<!-- edit: 08-Dec-2021
- 改 line6 錯字：response
-->

問題
---
請同學嘗試用 axios 串接這個 API 並透過 console.log 輸出以下要求:
https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json

1. 該 JSON 的陣列資料總共有多少個物件?
2. 請輸出該 JSON 陣列資料的第一筆物件，屬性 id 所對應的值。
3. 請輸出該 JSON 陣列資料的第一筆物件，屬性 name 所對應的值。
4. 請輸出該 JSON 陣列資料的第一筆物件，屬性 imgUrl 所對應的值。
5. 請輸出該 JSON 陣列資料的第一筆物件，屬性 area 所對應的值。
6. 請輸出該 JSON 陣列資料的第一筆物件，屬性 description 所對應的值。
7. 請輸出該 JSON 陣列資料的第一筆物件，屬性 group 所對應的值。
8. 請輸出該 JSON 陣列資料的第一筆物件，屬性 price 所對應的值。
9. 請輸出該 JSON 陣列資料的第一筆物件，屬性 rate 所對應的值。

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


<!-- 解答
axios.get('https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json')
.then(function (response) {
console.log(response.data.length);
console.log(response.data[0].id);
console.log(response.data[0].name);
console.log(response.data[0].imgUrl);
console.log(response.data[0].area);
console.log(response.data[0].description);
console.log(response.data[0].group);
console.log(response.data[0].price);
console.log(response.data[0].rate);
});
-->

| Slack | CodePen |
|:-----------:|:----------------------------------------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/WNEaBVL |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=1011 |
| Iris Huang | https://codepen.io/ythuang/pen/LYjXQGw |
|Aaron Tu|https://codepen.io/aarontu/pen/oNeQEax|
| Elaine Liu | https://codepen.io/elaine7598/pen/yLoQvRG?editors=0011 |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/LYjXQwZ|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/BadGYEY?editors=0010 |
| YuriT | https://codepen.io/wenfisht/pen/NWvEyoz |
|Cheng Pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|米米|https://codepen.io/Jameshsu0407/pen/eYEQVxa?editors=0012|
|Hsinag|https://codepen.io/chao20211/pen/KKvrowJ?editors=1010|
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/BadGroV?editors=1111 |
|jojoy|https://codepen.io/jojoy/pen/yLoQvmw?editors=0011|
|Arista|https://codepen.io/arista-hsieh/pen/yLoQKeW|
| Sam | https://codepen.io/sam-hsu/pen/eYEQVqq |
| Genos | https://codepen.io/pb220416/pen/XWayEMm |
| 劉維倫 | https://codepen.io/lun0223/pen/wvqQmGE?editors=1012 |
Tim Lin|https://codepen.io/TimmyLin/pen/GRvwxWx
| 大衛 | https://codepen.io/exnsrpjc/pen/vYJQRNJ?editors=1012 |
| -------------- | ---------------------------------------------------------------- |
| POPEYE | https://codepen.io/popeye_ux/pen/KKvroPJ |
| 鄭安志 | https://codepen.io/lwmtsgek/pen/RwZqMxM?editors=1111 |
| Jun Ting Lin | https://codepen.io/jake1155/pen/wvqQmeQ |
| lumei | https://codepen.io/l_umei/pen/PoKxRyX |
| 三隻小貓 | https://codepen.io/bagelover/pen/abyQYQW |
| 雪莉 | https://codepen.io/utshang216/pen/bGrQvmy |
| kk | https://codepen.io/potatokaka/pen/VwzVXVX?editors=1011 |
| 有廖先生(Rain) | https://codepen.io/billpop741/pen/MWvzGWj |
| 洋蔥 | https://codepen.io/oikdkmxq-the-looper/pen/RwZqMVQ?editors=0012 |
| Yunei | https://codepen.io/Yunei/pen/porQVoy |
| Jocelyn | https://codepen.io/enjoyful/pen/XWayqWR?editors=0011 |
| Bella Shya | https://codepen.io/BellaXie/pen/MWvzGwj?editors=1010 |
| Gill | https://codepen.io/Gill-Chin/pen/bGrQvaz?editors=0011 |
| 吉兒 | https://codepen.io/Jillkate/pen/MWvzGab |
| 群嘉 | https://codepen.io/efzdamnp-the-lessful/pen/zYdMaGM?editors=0012 |
| Louis | https://codepen.io/Louis164156/pen/KKvrREv?editors=1111 |
| Fleur | https://codepen.io/swwlee/pen/rNzQKJR?editors=1111 |
| BeanHuang | https://codepen.io/Beanhuang/pen/XWayYqQ?editors=1011 |
|Jasper|https://codepen.io/li-jasper/pen/eYEQKqw|
| Riley | https://codepen.io/jjpxbprd/pen/ZEJmjOz |
| YC | https://codepen.io/YCLu/pen/JjyeByE |
|Phil|https://codepen.io/ctkeftjp-the-animator/pen/vYJQavr?editors=0011 |
|Joey|https://codepen.io/Joey-Chen/pen/VwzVGxR?editors=1010 |
|陳暐中|https://codepen.io/wei-z/pen/OJjaBVR?editors=0011 |
|阿和|https://codepen.io/shnny/pen/BadGqpW?editors=1011|
|AKI|https://codepen.io/akichen27/pen/LYjXgaG|
|張喆|https://codepen.io/wow767t/pen/ExvOOYa|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/OJjarOJ?editors=1111 |
|Calon|https://codepen.io/Calon0118/pen/QWMJEdP|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/BadGbOv?editors=0012 |
|鉦勝|https://codepen.io/atckmax823/pen/KKvrYyN?editors=1011|
|tingyu|https://codepen.io/dgltu/pen/zYdMXba?editors=1011|
| 肉魚 | https://codepen.io/zoechen13/pen/KKvrLYG |
| Bonnie | https://codepen.io/bonnieli1414/pen/oNeQKxd?editors=0011 |
|Anna|https://codepen.io/kycrleao/pen/zYdyOWX|
|Steven Chan | https://codepen.io/Steven1220/pen/VwzqvYm?editors=1011 |
|yunyi|https://codepen.io/yunyi12374/pen/ZEJbKVW|
| 連小艾 | https://codepen.io/bolaslien/pen/dyzwWRb?editors=0012 |
| Lai | https://codepen.io/co_lai/pen/qBXLmwE?editors=1111 |
| Yashien Lin | https://codepen.io/YashienLin/pen/RwZEZLv?editors=0011 |
| ZOE WU | https://codepen.io/Zoechiueh/pen/ZEJmMOe?editors=0011 |
|phiphiphi|https://codepen.io/aiya861202/pen/eYEmVjR?editors=1112|
|kailun|https://codepen.io/Kailun/pen/eYEbVbb|
|Metis Teng|https://codepen.io/metis-teng/pen/gOxZeOR?editors=0011|
|乃萱|https://codepen.io/nainaikuo/pen/eYEbXNX?editors=0011|
|Alvin|https://codepen.io/Alvin20201116/pen/xxLMrpw?editors=1011|
|Gui|https://codepen.io/guitimliu/pen/BadMZqV|
| Yof | https://codepen.io/yangyof/pen/ExvrwxQ?editors=1011 |
| 蔣秉彣 | https://codepen.io/the-pierre/pen/VwzRLEo?editors=1010 |
| Sylvia-H | https://codepen.io/Cosmosheart/pen/GRvepym?editors=0012 |
| ZY Hsu | https://codepen.io/zihyin/pen/OJjqpza?editors=1011 |
|danny123|https://codepen.io/binlandz123/pen/ExvJKEQ?editors=1010 |
|debby yeh|https://codepen.io/bhliyoup/pen/BadEWaJ?editors=1111|
|kevinhes|https://codepen.io/kevinhes/pen/YzxMjbW?editors=0012|
|Sandy|https://codepen.io/Sandy_L/pen/KKvJoOL?editors=0011|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/QWMJxxr?editors=0011|
|小K|https://codepen.io/kelen1995/pen/porXWbX|
|傑瑞|https://codepen.io/auatwood909815/pen/MWvMPqa?editors=1010|
|艾瑞克|https://codepen.io/ericla/pen/ZEJgGwQ?editors=0012|
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/oNeKRyZ?editors=1112|
| Juno Li | https://codepen.io/Juno026/pen/xxXKZRy?editors=1011 |
paul|https://codepen.io/printfootya/pen/JjrPqPQ?editors=1111|
|Hamaji| https://codepen.io/hamajibashi/pen/RwLNpNY |
|Jie Du|https://codepen.io/qgqonost-the-flexboxer/pen/VwMYbZO?editors=0012 |
|Joey|https://codepen.io/Joey-Chen/pen/QWqwrpb|
|YOYO|https://codepen.io/lumedkle/pen/wvrBxdX?editors=1011|
|Jeff|https://codepen.io/jeff-cheng/pen/abLvMRo?editors=0012|
|Clara|https://codepen.io/ClaraChen/pen/ZEXWmyv?editors=0011|
| Aya | https://codepen.io/NoNameNote/pen/eYGZxbv |
| Keep | https://codepen.io/keep-/pen/xxXOKyX?editors=0111|
| Zooey Cheng | https://codepen.io/noraneko0430/pen/rNGMzBd?editors=0011|
|ShinyChen |https://codepen.io/shinychen/pen/PoJBOWp |