---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 28 - axios 串接練習

### axios - get
請記得載入 axios 的 CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>

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

// 在以下 URL 的部分填入 API 網址
axios.get('URL')
  // 如果連接成功，可以用 then() 處理傳回來的值，將回傳結果儲存於 response。
  .then(function (response) {
    console.log(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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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[1].description);
console.log(response.data[1].group);
console.log(response.data[1].price);
console.log(response.data[response.data.length - 1].rate); // 也可以直接使用 response.data[2]
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:---------------------:|:--------------------------------------------------------------------------------:|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/zYaKyRO) |
| shinyhung#3825 | [CodePen](https://codepen.io/sean_1215/pen/RwJKavJ?editors=1011) |
| jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/xxzgVBd?editors=0011) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/PoaWNXx) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/GRGNvXE) |
| Cliff#4606 | [Codepen](https://codepen.io/Cliff_hex/pen/qBKRZQj) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/mdKRPoj) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/rNKjePL) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/poKRbzj?editors=1012) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/qBKRNdp?editors=1011) |
| 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/VwdPaqQ?editors=1111) |
| 軟綿綿 (๑•ᴗ•๑) ♡#3627 | [CodePen](https://codepen.io/Connie-Chien/pen/gOKgMpq?editors=0011) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/MWXJeej?editors=0011) |
| Hironaka#7367 | [CodePen](https://codepen.io/Hironaka0815/pen/PoaWzpr?editors=1111) |
| kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/jOKyrwq) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/zYaNBwE?editors=0012) |
| Arista#5802 | [Codepen](https://codepen.io/arista-hsieh/pen/XWYpKga) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/ZERLOJK) |
| albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/poKRyGv?editors=1012) |
| WEI_RIO#9342 | [Codepen](https://codepen.io/wei_wu/pen/BaVpzwa?editors=1011) |
| mandylai#4055 | [Codepen](https://codepen.io/mandy-lai-2/pen/OJEWXxL) |
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/poKRbLR) |
| hsiung阿熊#4079 | [Codepen](https://codepen.io/hsiungchi/pen/PoaWzvP) |
| jacky010080#0880 | [CodePen](https://codepen.io/Yen-Jung-Chen/pen/LYrxRPa?editors=1011) |
| Yiru#0236 | [Codepen](https://codepen.io/yiru94/pen/abKpZbw?editors=1011) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/bGKgedX) |
| Lucie#3831 | [Codepen](https://codepen.io/bisespei/pen/BaVpLNL) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/YzvprmO) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/dyKNpGx?editors=1012) |
| yawun#0042 | [CodePen](https://codepen.io/monicalin/pen/MWXJjPz) |
| xherobruce#6825 | [CodePen](https://codepen.io/winwinbruce/pen/jOKyMeK) |
| Peng#9811 | [CodePen](https://codepen.io/peng-027/pen/PoaWGXj) |
| 末次#0236 | [Codepen](https://codepen.io/yunjulee/pen/XWYpjBG) |
| Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/rNKjMob) |
| 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/gOKgwxw) |
| amy芳#1385 | [Codepen](https://codepen.io/amy-chieng/pen/ZERLBGN) |
| suihsilan#9485 | [Codepen](https://codepen.io/suihsilan/pen/mdKROrB?editors=0010) |
| 粉蒸肉#6214 | [codepen](https://codepen.io/wrightyu/pen/PoaWbBd?editors=1111) |
| Loran#1105 | [codepen](https://codepen.io/loranlin/pen/yLEgVxL?editors=1011) |
| Ruby Chen#7452 | [Codepen](https://codepen.io/ruby92429/pen/jOKyVvj?editors=1011) |
| Hazel.#6020 | [Codepen](https://codepen.io/Hazelhsieh/pen/qBKRqgX?editors=1011) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/GRGrrJP) |
| 雷雷#7844 | [CodePen](https://codepen.io/lei-yi-jie/pen/RwJKKWe?editors=1011) |
| banazita#5143 | [CodePen](https://codepen.io/banazita/pen/QWxdNZX?editors=1011) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/xxzgRww?editors=1111) |
| charlottelee849#0366 | [CodePen](https://codepen.io/charlotte-lee/pen/bGKggoN?editors=0012) |
| Kimi #9564 | [CodePen](https://codepen.io/kimihu91/pen/VwdKgpQ) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/OJEWbdr) |
| RJRS#9430 | [Codepen](https://codepen.io/RJRS/pen/RwJKKqz) |
| Hilda#7085 | [Codepen](https://codepen.io/vwquikad-the-vuer/pen/wvXggRM) |
| masterYan#2480 | [CodePen](https://codepen.io/htzwgoqt-the-looper/pen/GRGrWJJ?editors=1010) |
| Cookie SSS#6991 | [CodePen](https://codepen.io/sqhjikpa-the-selector/pen/ZERLeXM?editors=1112) |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/rNKjyYQ?editors=1011) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/KKeaWrB?editors=0011) |
| Wei#2330 | [CodePen](https://codepen.io/ixfjxrbo-the-typescripter/pen/eYKgvbx) |
| hannahTW#2224 | [CodePen](https://codepen.io/hangineer/pen/xxzgdbG?editors=0011) |
| azami#5986 | [Codepen](https://codepen.io/azami/pen/wvXgddx) |
| Cream#3449 | [Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/mdKRmKx?editors=1011) |
| Silvialu#4521 | [Codepen](https://codepen.io/Silvia091640/pen/poKRwxe?editors=1111) |
| 0xWIlliam #8796 | [CodePen](https://codepen.io/0xWilliam0322/pen/VwdPWpG?editors=1011) |
| poetry1933#2713 | [CodePen](https://codepen.io/poetry1932/pen/QWxdMvq?editors=1111) |
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/VwdPzGe?editors=1111) |
| SASIMI#5099 | [codepen](https://codepen.io/sashimi1327/pen/oNyjVeY) |
| 勁辣雞腿寶#5817 | [Codepen](https://codepen.io/orz311013/pen/ZERLJNw?editors=1111) |
| PayRoom#8328 | [CodePen](https://codepen.io/water38198/pen/LYrxjKp) |
| jackson204#6363 | [CodePen](https://codepen.io/jackson204/pen/VwdPrKB?editors=1111) |
| RayChen#6088 | [CodePen](https://codepen.io/raychen1996/pen/ExRZbyX) |
| 出事了阿伯#9923 | [CodePen](https://codepen.io/BradpittLai/pen/poKRddE?editors=1012) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/dyKNZvj) |
| 安o#2448 | [Codepen](https://codepen.io/JzhenAn/pen/xxzgpMK?editors=1111) |
| 蓁心#6229 | [Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/RwJKxJR?editors=0011) |
| William Lai#0196 | [Codepen](https://codepen.io/lai-weihan/pen/ExRZoOz) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/XWYpZqm?editors=1111) |
| YI#0863 | [codepen](https://codepen.io/YI0305/pen/abKpYVE?editors=1012) |
| 萱仔#0781 | [codepen](https://codepen.io/ting-hsuan/pen/KKeaoLW?editors=1010) |
| Mylène#2481 | [Codepen](https://codepen.io/hamajibashi/pen/abKpYEE) |
| mou#2215 | [Codepen](https://codepen.io/shihchiehlan/pen/OJEWwrP?editors=1011) |
| Data#9297 | [Codepen](https://codepen.io/kirakira72/pen/QWxdENb) |
| Jill#5577 | [CodePen](https://codepen.io/Jillkate/pen/yLEgxdR) |
| CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/ExRZBaZ) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/OJEWNqr?editors=0010) |
| Chung#5951 | [Codepen](https://codepen.io/yuju16/pen/YzvNQpO?editors=0011) |
| 柔柔#1716 | [Codepen](https://codepen.io/rouchen/pen/OJEWKbN?editors=0011) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/eYKgqQQ?editors=1011) |
| 吃醉吐 #3706 | [Codepen](https://codepen.io/wei-nie/pen/dyKvbyG?editors=1011) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/mdKWbyW) |
| 王懷英#7271 | [Codepen](https://codepen.io/huaiying/pen/RwJpbVg) |
| 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/MWXpgzg?editors=1111) |
| Ron Liang#7277 | [Codepen](https://codepen.io/ron-go/pen/WNypNNB) |
| Greta#0837 | [CodePen](https://codepen.io/gretali/pen/abKJbdW) |
| JustinLiu#9699 | [CodePen](https://codepen.io/justin0227/pen/NWzpPPr?editors=0011) |
| Yishan#4902 | [CodePen](https://codepen.io/gdjrehhw-the-animator/pen/xxzqxvJ?editors=1010) |
| yumy#1940 | [Codepen](https://codepen.io/yumyyang/pen/XWYMWjp) |
| RyanTsai#8906 | [CodePen](https://codepen.io/linlaose/pen/OJEpPZb?editors=1111) |
| beta lin#1445 | [CodePen](https://codepen.io/linbeta/pen/vYrxNKr) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/MWXpwVM) |
| 芮綺#5224 | [Codepen](https://codepen.io/zhan70/pen/abKpwEq?editors=1011) |
| 肉桂卷#0625 | [Codepen](https://codepen.io/ginnlee/pen/XWYMbBb?editors=1011) |
| kancheng#3915 | [CodePen](https://codepen.io/kancheng/pen/BaVWmrg?editors=1111) |
| Yuna Huang#2692 | [CodePen](https://codepen.io/Yuna1002/pen/wvXJRZd?editors=0010) |
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/NWzpJvZ?editors=1111) |
| FiReBrO#0557 | [CodePen](https://codepen.io/firebro42/pen/MWXpREO) |
| Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/zYawGJY?editors=0012) |
| yen#5757 | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=0011) |
| yoyo#1003 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/oNyWWKB) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/WNyjmjP) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/xxzdXRo) |
| 鑫鑫#4346 | [CodePen](https://codepen.io/Neil1024/pen/zYawXqd?editors=0011) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/rNKmoKJ) |
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/LYrLyeP)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/VwdWbNj)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/bGKRRmz?editors=1111)|
|shio#1414|[codepen](https://codepen.io/shioyen/pen/XWYgzYX?editors=1112)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/yLEbVKG)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/YzvxPjR)|
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/YzvxpVm?editors=1011)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/vYreOeq)|
|Lou#0085|[Codepen](https://codepen.io/Lusie_H/pen/ExRwKGO?editors=1011)|
|健育#5748|[Codepen](https://codepen.io/c1317156/pen/OJExaQj?editors=1011)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/xxzPqzg?editors=0011)|
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/QWxOYoK)|
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/gOKoGZJ)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/zYapmjw)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/VwdyOdd?editors=0011)|
|pss940909#8650|[CodePen](https://codepen.io/pss940909/pen/XWYZjOW?editors=1011)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/JjZpJMm?editors=0011)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/mdKXBZa)|
|入門小菜G#0191|[CodePen](https://codepen.io/DennisLiu123123/pen/qBKYomP)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/LYrmgWp)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/LYrradj?editors=1011)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/LYrraoQ?editors=0010)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/jOKpjLX?editors=1011)|
|Velma#1693|[Codepen](https://codepen.io/Ze1225/pen/eYKjwBw?editors=0010)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/gOKdgJK?editors=0010)|
|魚子醬#5220|[Codepen](https://codepen.io/haihsuan/pen/MWXqoPN)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/poKZoLz?editors=0011)
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/vYrbWNb?editors=1011)
|Ringo#7583|[CodePen](https://codepen.io/ringolai1988/pen/vYrbQZM?editors=0011)
|samger#0808|[CodePen](https://codepen.io/lee-wei-hong/pen/rNKRwPJ?editors=1111)
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/BaOjadW?editors=1011)|