昨天我們資料都處理差不多啦~~
附上昨天寫完的 CodePen
CodePen: https://codepen.io/wemyferb/pen/VwjwPEd

現在我們只需要把資料呈現於畫面之上
不過這裡要注意一點
我們把 BMI狀態拆開來寫
因為我們BMI值要利用class來對應不同的顏色
由於要用 innerHTML 組字串
所以在外層先宣告一個空字串(因為innerHTML會清空內容再加，安全性差)

 let str = '';

再來是宣告日期的部分

let date = new Date();
let year = date.getFullYear();
let month = date.getMonth()+1;
let day = date.getDate();

BMI值對應的class名稱
利用物件包物件的形式

 let bmiStatus = {
            superthin: {
                class: 'superthin'
            },
            verythin: {
                class: 'verythin'
            },
            thin: {
                class: 'thin'
            },
            normal:{
                class: 'normal'
            },
            fat:{
                class: 'fat'
            },
            veryfat:{
                class: 'veryfat'
            },
            superfat:{
                class: 'superfat'
            }
        };

再來就是拆開BMI狀態啦~~

 for(let i = 0; i < item.length ; i++){
        let bmi = BMI(data[i]);
        let content = data[i].body;
        let height = item[i].heightVal / 100;
        let weight = item[i].weightVal;
        let bmiVal = (weight / Math.pow(height,2)).toFixed(2);
        str+= `    
                <div class="d-flex justify-content-center align-items-center py-3">
                    <div class="circle mr-3 ${bmiStatus[content].class}"></div> 
                    <div class="text-white mr-3">${bmi}</div>
                    <div class="text-white mr-3">BMI :${bmiVal} </div>
                    <div class="text-white mr-3">Height : ${item[i].heightVal} cm</div>
                    <div class="text-white mr-3">Weight : ${item[i].weightVal} kg</div>
                    <div class="text-white mr-3">${year+'/'+month+'/'+day}</div>
                    <i class="fas fa-trash text-white trash" data-index=${i}></i>
                </div>
        `
    }
    list.innerHTML = str;
}
function BMI(item){
    let height = item.heightVal / 100;
    let weight = item.weightVal;
    let bmi = (weight / Math.pow(height,2)).toFixed(2);
    switch(true){
        case bmi <=15 :
            item.body = 'superthin';
            return  "非常嚴重的體重不足";
        case  bmi >15 && bmi<=16 :
            item.body = 'verythin';
            return  '嚴重體重不足';
        case bmi >16 && bmi <=18.5 :
            item.body = 'thin';
            return  '體重過輕';
        case bmi >18.5 && bmi <=25:
            item.body = 'normal';
            return  '體重正常';
        case bmi >25 && bmi <=30:
            item.body = 'fat';
            return  '體重過重';
        case bmi >30 && bmi <=35:
            item.body = 'veryfat';
            return  '中等肥胖';
        case bmi >35 :
            item.body = 'superfat';
            return  '嚴重肥胖';
    }
}

這裡我們不使用if else 會造成效能低落
而改用switch 並回傳
由於我們是使用表達式 能接收回傳值

 let bmi = BMI(data[i]);

此時有人會好奇
Math.pow 與 toFixed是什麼
這裡我就提供 MDN的介紹啦
Math.pow : https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
EX:
Math.pow(base, exponent)
Math.pow(2, 2) 基底2 冪方2 也就是2的2次方

toFixed: 小數點後取第幾位
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed

算完BMI總共是多少 就可以開始組字串啦
這裡要注意一點
取物件裡的值有2種方式
分別為 . 與 []
[]又可以為
['字串']
[變數]
[數字] (類似陣列概念)
而我們是使用變數來取值

 let content = data[i].body;
 ${bmiStatus[content].class}

最後附上今天實作的程式碼
CodePen: https://codepen.io/wemyferb/pen/ExyxWqr
可以看看今天實做出來的成品
是不是很欣慰呢~~
明天我們將介紹如何刪除單筆資料 與多筆資料
有任何問題 或是內容有誤都可以回覆我唷!!