# 🏅 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 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看)  <!-- 解答: 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]() | -->
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up