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就此完成。继续学习去了~

posted @ 2018-05-07 10:13  Sky_Ice  阅读(1205)  评论(0编辑  收藏  举报