---
# System prepended metadata

title: "\U0001F3C5 Day 28 - axios 串接練習"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 28 - axios 串接練習

### axios - get
請記得載入 axios 的 CDN
```htmlembedded=
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
```

#### axios 的 get 語法可以用來取得遠端伺服器的資料
```javascript=
// 在以下 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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  

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 / 答案 |
| --- | ----- | ----- |
|  01  |   voke    | [CodePen](https://codepen.io/FiSi-the-lessful/pen/VworPbv) | 
|  02  |   泊岸    | [CodePen](https://codepen.io/qoq77416416/pen/poMZMVR?editors=0011) | 
|  03  |   Jainee   | [CodePen](https://codepen.io/Jainee0110/pen/dyxqjpp) |
|  04  |   Tatsu   | [CodePen](https://codepen.io/chindesu0207/pen/eYqLjBw) | 
|  05  |   tim   | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/NWQLBzE?editors=1012) | 
|  06  |   嚼勁先生   | [CodePen](https://codepen.io/James520284/pen/oNKPMJw) |
|  07  |   毛巾   | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/JjgaaoJ) |
|  08  |睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/rNXZZaL?editors=0011)|
|  09  | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/GRVXXjw?editors=0011) | 
|  10  |  Hedwig  | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/bGXxmNe?editors=1011) | 
|  11  | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/LYwJXZG)|
|  12  | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/NWQLOKr)| 
|  13  | kaka_945 | [CodePen](https://codepen.io/kay945/pen/BaXOGvq) | 
|  14  | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/KKOxbVK) |
|  15  | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/MWNqZWw?editors=0012) | 
| 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/ExqeGNm) | 
|  17   |   JIA    | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/MWNqLLq?editors=0012) | 
|  18   |   david1819    | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/dyxqrPG) | 
| 19|brucelee0629| [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/xxvaBeR?editors=1011) | 
|  20   |    610   | [CodePen](https://codepen.io/YI-LING-LIU/pen/eYqLogd) | 
|  21   | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/ZEgMNvo?editors=1111) | 
|   22  |   kun._c8_shake_it    | [CodePen](https://codepen.io/barry91205/pen/BaXOExX?editors=1111) | 
|   23  |   Rogan    | [CodePen](https://codepen.io/RoganHsu/pen/jOgvgZb?editors=1011) | 
| 24 | Mos | [CodePen](https://codepen.io/mos25399/pen/LYwJwaJ?editors=1011) | 
| 25 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/xxvyxdG) | 
|  26   |   Ariel    | [CodePen](https://codepen.io/ariel0510/pen/BaXqapJ?editors=0011) |
|  27   |   Sonia    | [CodePen](https://codepen.io/YUJOU/pen/poMxoxm?editors=0011) |
|  28   |   chris    | [CodePen](https://codepen.io/chris-chen-the-selector/pen/rNXqVLJ?editors=0010) |
| 29 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/LYwgNQo) |
| 30 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/BaXqYMp) |
|  31   |     Celine  | [CodePen](https://codepen.io/szuning/pen/YzmJXow?editors=0010)|
|  32   |     jimmy.0706  | [CodePen](https://codepen.io/JimmyMao/pen/KKOGxmP?editors=1012)|
|  33   |  Mike  | [CodePen](https://codepen.io/mike2049/pen/jOgQOWZ?editors=0012)|
| 34 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/MWNqWQW) |
| 35 |joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/QWeJNqG) |
| 36 |邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/qBeQMyj?editors=1011)|
| 37    |  yuling     | [CodePen](https://codepen.io/yu-ling-peng/pen/OJKapXw?editors=0011) |
| 38 |Chun| [CodePen](https://codepen.io/Chun_debbie/pen/zYgMVBM?editors=0012) | 
| 39 | jerry_66983   | [CodePen](https://codepen.io/Barry-C/pen/mdNQNqX?editors=0012) | 
| 40 | charlottelee   | [CodePen](https://codepen.io/char849/pen/dyxwOYm) |
| 41 | 野鴿   | [CodePen](https://codepen.io/HoshinoSyouta/pen/QWezpZR?editors=0012) |
| 42 | Joannehu   | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/VwoqMmd?editors=1011) |
| 43 | Lotte  | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/PoMXLMm?editors=0011) |
|  44   |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/XWvowpp?editors=1112) |
|45|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/vYobYBM?editors=1111)|
|46|是在哈囉|[CodePen](https://codepen.io/miyxdhem-the-solid/pen/jOgdbdZ)|
| 47 | Glen_69515 |[codePen](https://codepen.io/glenyaochih/pen/eYqxxqW?editors=1112)|
| 48 | ab567ab5 |[codePen](https://codepen.io/WanTzu-Chiang/pen/YzmgGNw?editors=0011)|
| 49 | JRz |[codePen](https://codepen.io/JRZHENG/pen/dyxrQxB?editors=1111)|
| 50 | Emma | [CodePen](https://codepen.io/Emma0919/pen/oNKOqLE) | 
|51|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/QWeRjMW?editors=0011) |
|52|Jack| [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/jOgoLYw?editors=1011) |
| 53 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/mdNYNoe?editors=0012) | 
| 54 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/vYoqjMB?editors=0012) | 
| 55 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/QwLLdGx?editors=1012) | 
| 56 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/vEBBmaE?editors=1011) |
| 57 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/OPLLzmd) |
| 58 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/MYgLGQe?editors=0011) |

<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->