---
tags: JS 直播班 - 2021 春季班
---

# 3/23 線上 Slack 助教

## 今日輪班助教時間

hsin-yu：3/23（二）
早上 10:00 - 中午 12:00，下午 1:00 -下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **穎旻：**
老師助教同學們好，這是我的 [Codepen](https://)，我原本預期「JS 第 8 行會出現數字 8」，但卻出現「預期外的結果是 0」，想問下問題出在哪裡？
> 助教回覆：

---
2. **YUKI**

(1) vscode引入js問題

像是把all.js和index.html放在同一個資料夾中，
有位組員 `<script src="/all-w5.js"></script> `
all-ws.js前面不加斜線也可以照常運作
但我和另外一位組員加上 / ，才可以運作，想請問原因?

> 助教回覆：
> 同層的相對路徑可以寫成 “./all-w5.js” 或不寫 ./ 直接寫 all-w5.js 都可以，有時候沒有寫 ./ 會讀取不到正確路徑，加上 ./ 就可以讀取到
至於原因我也不太了解 xd 但有時候的確會碰到這樣的情況

(2) 這是我的 [codepen](https://codepen.io/sihyu/pen/oNYKmOq?editors=1011) 想請問第五周小組任務，最後一題[所有區里長人數都整理在一個物件裡]，我 66 行出現的是陣列，不知怎麼把物件取出來。

> 助教回覆：
> 可以先試試看抓出所有區的名稱
先宣告一個空物件
對 data 陣列用 forEach 將 物件[item['區別']] 先賦予值為 0，執行完 forEach 預期會有所有區的物件屬性且值都是 0
再對 data 陣列跑一次 forEach，這次將 物件[item['區別’]]++，預期會抓出每筆 data 中的物件的區別，再將 物件[該區別名稱] +1，跑完所有 data 陣列中的物件後就會有每個區的數量，就可以知道里長人數

可以先寫寫看，如果回覆說明的不清楚可以再留言提問～

---

3. **方文文**
這是我的Codepen：https://codepen.io/chiawen81/pen/vYgYjzO?editors=1011
我的問題如下：

(1) 我原本預期在 JS 面板的第三行可以拿到 JSON 陣列資料的第一筆物件，也就是以下這段 code
但卻出現 undefined

  {
    "id": 0,
    "name": "肥宅心碎賞櫻3日",
    "imgUrl": "https://images.unsplash.com/photo-1522383225653-ed111181a951?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1655&q=80",
    "area": "高雄",
    "description": "賞櫻花最佳去處。肥宅不得不去的超讚景點！",
    "group": 87,
    "price": 1400,
    "rate": 10
  }

> 助教回覆：
> 看 codepen 同學好像已經成功抓出第一筆物件了xd
因每個 API 回傳的 response 資料有可能不同，如果要取得需要的資料可以像同學在 codepen 寫的：先印出回傳的 response，再根據 response 的內容抓出資料
像作業提供的 API 回傳的 response 就是將旅遊套票資料放在 data 屬性中，data 屬性是一個陣列，因此就需要用 response.data[0] 抓出第一筆資料

(2) 我原本預期 每日任務提供的 API 連結資料 會和 JS 面板第二行 console.log(res) 得到的結果一樣
但是在 codepen console 的結果， 拿到的資料會用物件多包了一層，並且把資料放在屬性名為 data 內，這和 API 連結裡的資料結構不同
API 連結：https://raw.githubusercontent.com/hexschool/js-training/main/travelAPI-lv1.json
在codepen 寫 console.log(res) 得到的結果：請在 codepen 連結JS面板第二行console得到的結果
https://codepen.io/chiawen81/pen/vYgYjzO?editors=1011

> 助教回覆：
> 呼叫 API （發 request）回傳的 response 不會只有需要的資料，還會有狀態碼 (status) 告訴發 request 的人這個請求的狀態是成功或失敗、發 request 的方式是 GET 或 POST 等等的其他網路溝通的資訊
因此如果是用呼叫 API 的方式取得需要的資料，可以先看一下 response 的內容再用陣列或物件的方式取得資料

---

4. **Cena**

這是我的 [codepen](https://codepen.io/hgdnkzkg/pen/JjEjaXm)
在 codepen 第八行}) 如果後面加上; 會出現錯誤 不知道是什麼原因
我想問的是 function 我看老師寫法好像都沒有再後面加; 例如　init()
是否在撰寫時不需要加;
對於什麼時候要加; 搞混了
因為我習慣寫完要加;

> 助教回覆：
> 因 codepen 中的範例是對 axios 連續執行 post()、then()、catch() ，如果把參數拿掉就會是

axios.post().then().catch();

> 如果在第 8 行加上分號 ; 就無法執行 .catch() 因此會出錯

---

5. **Jimmy Fang**

老師助教同學們好，這是我的 [Codepen](https://codepen.io/pohxiqqo/pen/qBREdWe?editors=1011) ，關於第六週 ajax 作業，我預期串接完後下拉選單顯示地區, js 第 77 行 regionSearch 沒在網頁上執行，有透過 js 程式碼 console.log(dataAry); 第 183 行及第 16 行，觀察非同步進行的順序除錯， 但還是找不出問題點，麻煩老師與助教指導，感謝
> 助教回覆：
> 因 codepen 中的 renderData() 沒有設定參數，如果執行 renderData() 都會將 dataAry（全部地區的資料）渲染到網頁上
可以設定參數（例如：renderData(array)），將 renderData()中的 dataAry 換成參數 array，第 79 行執行 renderData(newArray) 才會將篩選後的陣列渲染
第 18 行的 renderData() 也要帶入 dataAry 渲染全部地區資料

---
（這裡只能由助教自行增加問題，請大家將問題放在 thread 上）