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

# 3/29 線上 Slack 助教

## 今日輪班助教時間

佩涵：3/29（一）
早上 9:00 - 早上 11:00，下午 1:00 -下午 5:00

## 發問規範

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

## 注意

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

## 問題

1. **mandy：**
老師助教同學們好，我想請問第五週主線任務
LV2：自己運用XD 設計稿來切版，並做 LV1.這個部分，卡3亇礼拜依舊不知如何著手，想趁這次連假寫出來，可以請助教說明第一步是要看著稿寫html嗎？還是要先做甚麼呢？
> 助教回覆：
切版的話通常會先將 HTML 結構規劃出來，再寫 CSS 的部分，等版面都切完後再去寫 JS，因為 JS 會綁定 DOM，此時就需要對應我們在 HTML 設定的 tag、id、class 名稱。
但如果同學製作 LV1 有卡住的話，助教這邊就不建議同學先做 LV2 哦
運用 innerHTML 渲染這部分的實作，老師在課堂上其實已經講解的很清楚了，同學若想複習可以觀看「[第五堂錄影檔 - 上半部](https://courses.hexschool.com/courses/2020111/lectures/31121214)」約 29:10 有講解 innerHTML 的觀念及範例，「[第五堂錄影檔 - 下半部](https://courses.hexschool.com/courses/2020111/lectures/31121220)」一開始老師則有大致實作一下作業 LV1 的流程～
畢竟這堂是 JS 課程，先將邏輯寫出來會比切版還重要唷，助教批改時也不會著重在 HTML、CSS 上，所以同學可以先將重點放在 JS 哩：）

---

2. **Jordan_Tseng：**
老師助教同學們好，我想問如果是像圖表下面標示的排序是按照陣列順序，這種中文如何去自行排序呢？台北台中高雄
> 助教回覆：
可以新增一個空陣列
並把（高雄）原陣列[0] 賦予給 空陣列[2]；（台中）原陣列[2] 賦予給 空陣列[1]；（台北）原陣列[1] 賦予給 空陣列[0]
這邊提供範例給你參考（第 37 - 40 行）：[CodePen](https://codepen.io/PeiHan/pen/WNRxVbd?editors=001)

> 信銓同學的解構賦值解法也讚讚～～

---

3. **Qizhen,Lin：**
老師助教同學們好，這是我的 [Codepen](https://codepen.io/ddnbmhxw/pen/OJbYgwg)，JS 第 8 行中的
data = response.data.data;
一直不知道為什麼第二個 data 可以抓到 api 的值，觀念上還不太理解，在麻煩助教了，謝謝
> 助教回覆：
第 1 個 data 是回傳的 response 物件的 data 屬性唷，如下圖
 <br>
第 2 個 data 則是外部資料 JSON 的屬性，如下圖（也是上圖的藍色底線 data）
因為這個 data 陣列是包在物件內的，所以要用 . 來取值
 <br>
不知道這樣的說明有沒有幫助妳釐清觀念 >< 若還是有不懂的地方可以再提問唷～

---
3. **Yu Chien：**
老師助教同學們好，這是我的 [Github](https://github.com/yuu-chien/hex-2021-JS-hw/blob/main/js/main-hw7.js)
圖表資料使用 C3.js 的這個方法：[data.json](https://c3js.org/reference.html#data-json) ，在 JS 第 126 行的變數 chartData 也有用 [JSONLint](https://jsonlint.com/) 確認過符合 JSON 格式；
原本預期「JS 第 131 行會出現圖表」，但「一直顯示不出來」，想請問問題出在哪裡？
麻煩助教解惑了，謝謝><
> 助教回覆：
一開始的圖表無法呈現出來是因為格式不對（須符合套件提供的格式，所以少了 keys）
也很感謝信銓同學另外提出可以直接使用整理過後的 totalObj 當作圖表的資料，不過因為同學是想要以擴充的思維來做的話，就需使用原先整理的 chartData 的格式，那這樣就要加上 keys 才可以正確產生出圖表，不過這邊因為有多屬性的關係它就不適合使用 donut 來呈現，也可以理解成每個圖表類型所適用的資料格式都會不同喔

// C3 Chart
    c3.generate({
        bindto: ".c-cart",
        data: {
            json: chartData,
            keys: {value: ['num']},
        },
    });

---

4. **Jordan_Tseng：**
老師助教同學們好，我把卡片內除了日期的值都做了排序並取出，想問如何針對日期做排序呢？附上這是我目前寫的程式碼進度：https://github.com/Jordan-TTC-Design/bmi-kata-ranking/tree/develop
裡面的main.js
> 助教回覆：
可以嘗試看看使用 sort 排序，月份及時間的有些地方要記得補 0（比如：只有個位數，需在前方補上一顆 0 排序才會是正確的）可以參考這兩篇文章：[[1]](https://www.shuzhiduo.com/A/n2d92VNYzD/)、[[2]](http://zhi-yuan-chenge.blogspot.com/2015/10/jsjavascript_16.html)
也附上助教寫的 [簡易小範例（只有幫小時補 0）](https://codepen.io/PeiHan/pen/VwPKRvE?editors=0011) 給你參考

---

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