---
# System prepended metadata

title: "\U0001F3C5 3/22 (一) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 3/22 (一) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

axios 串接練習 - get
---
請記得載入 axios 的 CDN
```htmlembedded=
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

#### axios 的 get 語法可以用來取得遠端伺服器的資料
```js=
// 在以下 URL 的部分填入 API 網址
axios.get('URL')
    // 如果連接成功，可以用 then() 處理傳回來的值，以下程式碼將回傳結果儲存於 responce。
  .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 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/6UoJVtD.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[0].description);
      console.log(response.data[0].group);
      console.log(response.data[0].price);
      console.log(response.data[0].rate);
  });
-->