JS特訓-DAY29-監聽切換排序功能

前言

延續上一次陣列排序進度，此次練習針對 select 切換排序方式

axios 取得 API 資料

綁定 HTML 的標籤，變數也使用一樣的名稱
宣告一個變數為 data，後續存放回傳的資料用
使用 axios 取得 API 資料

let record = document.querySelector(".record");  
let select = document.querySelector(".select");  
let data;  
let dataUrl ="https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json";  

axios.get(dataUrl).then((response) => {
data = response.data;  
console.log(data);  
getRecord();  
sortData(data, select.value);  
});

建立清單渲染於網頁

使用一個函式存放要取得資料的方式

宣告一個變數為空字串
透過 forEach 來取得想要的資料
組字串，因為我要做成列表，所以用一個 div 包住，成為區塊元素
用 innerHTML 印出標籤在網頁上

function getRecord() {
  let str = "";  
  data.forEach((item) => {
    str += `
      <div>  
        <ul>
          <li>編號 ID：${item.id}</li>
          <li>姓名：${item.name}</li>
          <li>完成進度為 ${item.process}</li>
        </ul>
      </div>  
    `;  
});  

record.innerHTML = str;  
}

監聽切換排序功能

延續上方取得資料後，要使用一個下拉選單做為條件，並排序其資料內容

select

把選項先寫好在 option 中，並在 select 做一個 class

<select class="select">  
  <option value="id">依照 id 編號排序(由1開始從上往下)</option>
  <option value="process">依照完課率排序(由最高到最低)</option>
</select>

sort() 排序資料

使用 sort() 讓資料可以依照條件排序：

建立一個函式，其參數為(資料，select 選擇結果)
判斷 select 的結果是 id ，使資料採用 sort()方法做排序(小到大)，因為取得的值為字串，所以同時轉型為整數。
判斷 select 的結果是 process，使資料採用 sort()方法做排序(大到小)，並只取到小數點後兩位，因後台結果有超過小數點兩位，小數點取到後兩位的渲染畫面較好看也可以做區別。

//select 排列條件  
function sortData(data, select) {  
  if (select === "id") data.sort((a, b) => parseInt(a.id) - parseInt(b.id));  
  //四捨五入，取小數點後兩位  
  else if (select === "process")  
    data.sort((a, b) => parseFloat(b.process) - parseFloat(a.process));  
}

監聽事件

完成資料處理後，建立 select 的監聽事件，對應的是 change，其函式內容要按照原本條件的順序排列，不然讀取的結果會是相反。(因為程式是由上到下讀取)

function selectRecord() {  
  sortData(data, select.value);  
  getRecord();  
}  

select.addEventListener("change", selectRecord);

CodePen

Renee's Blog