ES6_Demo，模擬后台json數據展示

最近在學習ES6，下面，模擬后台傳過來json數據，並在頁面展示的一個小Demo。

頁面簡單的不可描述，只有一個button按鈕

<button>點擊獲取json數據</button>

　通過點擊按鈕，觸發點擊事件獲取數據。

let btn = document.querySelectorAll('button')[0];

　獲取按鈕button

   let info = [{
        title: "aaa",
        read: 100,
        hot: true
    }, {
        title: "bbb",
        read: 222,
        hot: true
    }, {
        title: "ccc",
        read: 333,
        hot: false
    }, {
        title: "ddd",
        read: 555,
        hot: true
    },]

　模擬后台數據

 let newArr = info.map((item, index, arr) => {
        let json = {};
        json.t = item.title;
        json.r = item.read;
        json.h = item.hot;
        return json;
    })

　通過map，遍歷json數據，並返回，將返回值賦給變量newArr

　

　第一種，整體展示，即，點擊一次按鈕，顯示所有數據

 btn.onclick = function () {
     newArr.forEach((val, index, arr) => {
        let ul = document.createElement("ul");
        document.body.insertBefore(ul, btn);
        let lis = `<li>${val.t}</li><li>${val.r}</li> <li>${val.h}</li>`
        ul.innerHTML = lis;
    })
}

　這里，采用了ES6新增的箭頭函數，以及，字符串模板，使用foreach遍歷循環整個數據，結果為一個點擊一次按鈕，展示所有數據。

   第二種，點擊一次獲取一條數據

 let num = -1;
    btn.onclick = function () {
        num++;
        let ul = document.createElement("ul");
        for (let i = 0; i < newArr.length; i++) {
            if (num < newArr.length) {
                document.body.insertBefore(ul, btn);
                let lis = `<li>${newArr[num].t}</li><li>${newArr[num].r}</li> <li>${newArr[num].h}</li>`
                ul.innerHTML = lis;
            }
        }
    }

　定義了一個num變量，用來表示數據序號，同時，判斷是否超出數據數量，如果沒有，則添加數據。

　　

　好了，一個小Demo就此完成。繼續學習去了~