JS特訓-DAY28-陣列排序進度

前言

這次的練習是需要：完課率排名功能
以API撈出資料，依照每個物件的 process 來進行進度排序，範例格式如下圖。

<ul>
 <li>第 1 名是廖洧杰，他的特訓班完成度是 33%</li>
 <li>第 2 名是王小明，他的特訓班完成度是 30%</li>
</ul>  

---

陣列排序進度

axios取得API資料

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

let list = document.querySelector('.userList');  
let dataList = [];  

axios.get('https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json')
.then((response) =>{
  dataList = response.data;
  getData(dataList);
})
.catch((err) => {  
  console.log(err);  
});  

建立清單渲染於網頁

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

• 宣告一個變數為空字串
• 使用 sort() 方法讓資料可以依照條件做排序(大到小)，因為取得的值為字串，所以同時轉型為整數
• 透過 forEach 來取得想要的資料
• 組字串，因為我要做成列表，所以用一個 div 包住，成為區塊元素
• 用 innerHTML 印出標籤在網頁上

function getData(data){
  let str = '';  

  data.sort((a, b) => parseInt(b.process) - parseInt(a.process));  

  .forEach((user, index) => {  
    str += `
    <div>
      <ul>
        <li>第 ${index + 1} 名是 ${user.name}，</br>他的特訓班完成度是${user.process}</li>
      </ul>
    <div>
    `;  
  });  
  list.innerHTML = str;  
}  

CodePen