Je code donc je suis là.

0%

JS Axios API、表單元素切換顯示資料

學習路上跌跌撞撞、過程總是零散,生活中總是被瑣事切割成碎片,如何把碎片時間拾揀與拼湊成可專心學習的塊狀已是一種考驗。

遇到六角舉辦的「JS 學徒特訓班」,給自己一次機會跟上進度,也要求自己要真的理解才寫,這需要時間,而語法的不熟悉仍然花時間,這樣一次、兩次、三次的記憶,希望能夠多留在腦中,很清楚知道自己忘的比記的還快,也在找尋且動自己對語法記憶的一把鑰匙。學習程式是非常全面性的,也因此看到自己在幾十年歲月裡看不到的盲點,雖然開始的非常慢,但總是比沒開始的好,那就透過寫程式當作一種自我的修煉吧。

這次的特訓班題目都很實用,尤其是對自己較不熟悉的 API 銜接、資料處理、資料圖形化的部分,覺得練習內容很受用,以此篇來記錄一下。

第二十九關,監聽切換排序功能

內容:以 Axios 讀取 API、使用表單元素 select 切換資料條件。
方式:

  • 抓取 DOM
  • 以 Axios 讀取 API 的資料
  • 監聽 select 切換
  • 處理資料
  • 渲染畫面

常常會忘記有些 JS 內建函式的參數是「函式」,然後常常用箭頭函式寫法忘記花括號…。

首先,需要先把 Axios 函式庫引進來

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

接著是 html 的內容

1
2
3
4
5
6
<select class="choose">
<!-- <option value="">請選擇排序依據</option> -->
<option value="id">依照 id 編號排序(由1開始從上往下)</option>
<option value="process">依照完課率排序(由最高到最低)</option>
</select>
<ul class="list"></ul>

再來就是 JavaScript 的部分了:

抓取 DOM

把會用到的 DOM 和 裝載資料的變數先抓好

1
2
3
4
5
const list = document.querySelector('.list');
const selector = document.querySelector('.choose');
const url =
'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json';
let data = [];

讀取資料

以 Axios 讀取 API 的資料

1
2
3
4
axios.get(url).then((response) => {
data = response.data;
// console.log(data);
});

監聽 select 切換,取值

1
2
3
4
5
// 監聽事件綁定
selector.addEventListener('change', (event) => {
if (event.target.value == '') return;
getSortData(event.target.value);
});

處理資料

資料需要以 ID 或 完成率來做排序,所以這個函式負責排序資料的處理。當選單的值為id時,以id來排序,不然就是用完成率來排名。
而為了讓排序更精準,在使用sort()時,給函式當參數。記得最後要呼叫渲染畫面的函式render()

1
2
3
4
5
6
7
8
9
// 取得選單的value 並排序
function getSortData(choose) {
data.sort((a, b) => {
if (choose == 'id') return parseInt(a.id) - parseInt(b.id);
return parseInt(b.process) - parseInt(a.process);
});
// 排序完炫染畫面
render();
}

渲染畫面

forEach()把資料一一撈出來,放在要渲染頁面的元素裡。

1
2
3
4
5
6
7
8
9
// 渲染畫面
function render() {
let str = '';
data.forEach((item, index) => {
str += `<li>ID: ${item.id}${item.name},他的特訓班完成度是 ${item.process}</li>`;
// console.log(item);
});
list.innerHTML = str;
}