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 的內容

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

再來就是 JavaScript 的部分了：

抓取 DOM

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

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 的資料

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

監聽 select 切換，取值

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

處理資料

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

// 取得選單的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()把資料一一撈出來，放在要渲染頁面的元素裡。

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