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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/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 / 答案 |
|:---------------------:|:--------------------------------------------------------------------------------:|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/WNPZZQp)|
|kawa|[CodePen](https://codepen.io/z83xji6/pen/zYeEEab?editors=1111)|
|Fabio20|[CodePen]([...](https://codepen.io/fabio7621/pen/NWoaajg?editors=1111))|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/eYxGGWj?editors=1111)|
|runweiting|[CodePen](https://codepen.io/weiting14/pen/VwgMMyL)|
|yuan!|[CodePen](https://codepen.io/townyuan/pen/mdvBBoR)|
|Peng|[CodePen](https://codepen.io/H-Peng/pen/mdvBqMp)|
|lychee_kk|[CodePen](https://codepen.io/kakakala/pen/KKJXyvY?editors=1111)|
|CPing|[CodePen](https://codepen.io/CPing/pen/OJdxOra?editors=1012)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/YzBrEBe)|
|小夏|[CodePen](https://codepen.io/michaelhsia/pen/VwgMrgy)|
|cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/JjxrJVJ)|
|phyllis|[CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/ExrwoWw)|
|xiaokui_71292|[CodePen](https://codepen.io/pen?template=eYxGyay)|
|Helen|[CodePen](https://codepen.io/milkteamonster/pen/gOqGvrP?editors=1111)|
|Alyce|[CodePen](https://codepen.io/alycehwy/pen/MWLEQQB?editors=0010)|
|維哲|[CodePen](https://codepen.io/kwz1202/pen/oNmePxM)|
|Yijing|[CodePen](https://codepen.io/Yi-Jing-71080635/pen/XWOeZGQ?editors=0010)|
|Chia Pin|[CodePen](https://codepen.io/joker-cat/pen/WNPZzvK)|
|ming0712|[CodePen](https://codepen.io/StevenHuang/pen/poGWaMx?editors=0010)|
|dora|[CodePen](https://codepen.io/dorayu/pen/OJdxvvw?editors=1011)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/qBgPoJm)|
|yuling|[CodePen](https://codepen.io/igzdflpu/pen/ExrwEJN?editors=1011)|
|RX00|[CodePen](https://codepen.io/llqzknqv-the-styleful/pen/KKJXRpw?editors=1011)|
|xin|[CodePen](https://codepen.io/Estherrrrrr999/pen/YzBrLob)|
|Uli|[CodePen](https://codepen.io/uli1313/pen/Jjxrvvv?editors=0011)|
|Winnie|[CodePen](https://codepen.io/codepen-io-winnie/pen/YzBrvmG?editors=0011)|
|kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/mdvBjMq)|
|Ataraxia|[CodePen](https://codepen.io/ataraxia8888/pen/eYxRedZ)|
|Jay-chiang|[CodePen](https://codepen.io/fwysphbw-the-vuer/pen/zYeELpv)|
|JUNEW|[CodePen](https://codepen.io/June-W/pen/YzBrjYx)|
|yu.t_liu|[CodePen](https://codepen.io/YuT200053/pen/WNPZadZ?editors=1111)|
|荷菓かのり|[CodePen](https://codepen.io/oogxwkvw-the-builder/pen/KKJXGOx?editors=1011)|
|claire|[CodePen](https://codepen.io/yi-wen-chen/pen/XWOexOG)|
|ann6212|[CodePen](https://codepen.io/yqmegupa-the-styleful/pen/qBgPQxq?editors=1012)|
|SHUO|[CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/BaMwvKE)|
|Rogan|[CodePen](https://codepen.io/RoganHsu/pen/WNPZmJL?editors=0011)|
|MY|[CodePen](https://codepen.io/ahmomoz/pen/oNmGRzO?editors=1011)|
|保羅|[CodePen](https://codepen.io/paul-1997/pen/xxMXvwr?editors=1011)|
|Ching|[CodePen](https://codepen.io/tzuchingg/pen/qBgPeMK?editors=0011)|
|Mattie|[CodePen](https://codepen.io/mattielin/pen/KKJyzWv)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/poGdRKB) |
| yuan2781 |[CodePen](https://codepen.io/ismebir/pen/OJdOWrw)|
| 風羽 |[CodePen](https://codepen.io/Joy-Huang/pen/QWYOpjX?editors=1111)|
| 依依|[CodePen](https://codepen.io/Rita-Yang/pen/abXVWoG?editors=1011)|
| stone4584|[CodePen](https://codepen.io/Royen0506/pen/GRzOENE?editors=1111)|
|奔跑吧(GTR150)|[CodePen](https://codepen.io/Wer-Qwe/pen/XWOzqQe?editors=1111)|
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/oNmoMEz?editors=0012)|
|hsu0921|[CodePen](https://codepen.io/HSUANIN0327/pen/vYbpNOL)|
|shcopy|[CodePen](https://codepen.io/shcopy/pen/WNPdrLN)|
|郭芙蘭#6374|[CodePen](https://codepen.io/flora_Kuo/pen/QWYaNwy?editors=1011)|
| shcopy |[CodePen](https://codepen.io/shcopy/pen/WNPdrLN)|
| gebyman |[CodePen](https://codepen.io/gebyman/pen/GRzyjmB?editors=0012)|
| shuuu |[CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/Exrogzw?editors=1011)|
| ⭐️小正 |[CodePen](https://codepen.io/colorgolden/pen/gOqoZJq?editors=1011)|
|tanuki5863|[CodePen](https://codepen.io/tanuki320/pen/rNPpRvR?editors=1011)|
|Oria|[CodePen](https://codepen.io/kajing/pen/LYqQEyW?editors=1011)|
|davidtt|[CodePen](https://codepen.io/David-Tsai/pen/OJdQJVR?editors=0011)|
|damon0323|[CodePen](https://codepen.io/swk9eny2/pen/OJdOgBE?editors=0111)|
|xuan|[CodePen](https://codepen.io/xuan0915/pen/OJdQZjZ?editors=1011)|
|Eden|[Codepen](https://codepen.io/iseden/pen/MWLQzzq)|
|ChrisSQR|[Codepen](https://codepen.io/ChrisSQR/pen/vYbdqOo)|
|Vivian2857|[Codepen](https://codepen.io/vivian_lin/pen/VwgQJRe?editors=1111)|
|santu0868|[CodePen](https://codepen.io/HatsumiSan/pen/ExrEdWZ?editors=1111)|
| Jerry |[CodePen](https://codepen.io/ildkosxk-the-encoder/pen/LYqmExV?editors=0010)|
| 歐陽龍龍#1061 |[CodePen](https://codepen.io/dizzydog-rgb/pen/bGzMwKM)|
| Lainie|[CodePen](https://codepen.io/Lainie88/pen/mdvLxKb)|
| nini1202desu|[CodePen](https://codepen.io/tvxq5206/pen/oNmMwdy?editors=1011)|
| Iris|[CodePen](https://codepen.io/iris831206/pen/GRzBvZR?editors=1112)|
|_shun0130|[CodePen](https://codepen.io/koba60052ww/pen/MWLBdoL?editors=1011)
|macihuang|[CodePen](https://codepen.io/macy1215/pen/jOdvOQb)
|bf_tsai|[CodePen](https://codepen.io/BF-Tsai/pen/LYqJVYP?editors=1011)
|NathanJames|[CodePen](https://codepen.io/ufo060204/pen/VwgEvOx)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/ZEwqrKR?editors=1011)|
|阿賀#3700|[Codepen](https://codepen.io/sungho/pen/jOdezBd?editors=0011)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/oNmaKjp?editors=1011)|
|Daylily|[Codepen](https://codepen.io/daylily/pen/YzBRxNL)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/abXQPpJ) |
| Andy | [Codepen](https://codepen.io/andy31342/pen/bGzQOoP?editors=1012) |
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/MWLZPJp)|
|sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/OJddjxw?editors=1111)|
|nikkita_3544|[Codepen](https://codepen.io/vanessa7259/pen/YzBBxaE?editors=1011)|
|JasonFu|[Codepen](https://codepen.io/jie-Fu/pen/poGMmdZ?editors=0011)|