js 单一有序数据结构 如何在页面在生成双层有序的列表

Question

有如下数据：

{

    "data": [

        {

            "title": "标题1",

            "link": "",

            "date": "2018-6-26",

            "views": 153,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题2",

            "link": "",

            "date": "2018-6-25",

            "views": 460,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题3",

            "link": "",

            "date": "2018-6-24",

            "views": 392,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题4",

            "link": "",

            "date": "2018-6-23,

            "views": 318,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题5",

            "link": "",

            "date": "2018-6-22",

            "views": 241,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题6",

            "link": "",

            "date": "2018-6-21",

            "views": 283,

            "info": "简述简述简述简述简述简述简述"

        },

        {

            "title": "标题7",

            "link": "",

            "date": "2018-6-20",

            "views": 216,

            "info": "简述简述简述简述简述简述简述"

        }

    ]

}

html结构如下

<ul>

    <li>

        <div>1</div>

        <div>2</div>

    </li>

    <li>

        <div>3</div>

        <div>4</div>

    </li>

    <li>

        <div>5</div>

        <div>6</div>

    </li>

    <li>

        <div>7</div>

        <div>8</div>

    </li>

</ul>

请问js如何用如上数据循环生成这样的有序html结构？

Answer 1

let html = ''for(let i = 0;i < data.length;i++) {&nbsp; &nbsp; let div = `<div>${data[i].title}</div>`&nbsp; &nbsp; html += i % 2 === 0 ? `<li>` + div : div + `</li>`}if (data.length % 2 === 1) {&nbsp; &nbsp; html += `</li>`}html = `<ul>${html}</ul>

Answer 2

&nbsp; &nbsp; var html = ''&nbsp; &nbsp; for(let i=0;i<a.data.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; var _html = ''&nbsp; &nbsp; &nbsp; &nbsp; for(let o in a.data[i]){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _html+=`<div>${a.data[i][o]}</div>`&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; html+='<li>'+_html+'</li>'&nbsp; &nbsp; }&nbsp; &nbsp; document.getElementById("app").innerHTML = '<ul>'+html+'</ul>'

Answer 3

let fragment = document.createDocumentFragment();&nbsp; let ulNode = document.createElement("ul");&nbsp; let liNodes = []&nbsp; data.map((item, index) => {&nbsp; &nbsp; let liNode = document.createElement("li");&nbsp; &nbsp; liNode.innerHTML = item.title&nbsp; &nbsp; liNodes.push(liNode)&nbsp; &nbsp; if (index % 2 !== 0) {&nbsp; &nbsp; &nbsp; let divNode = document.createElement("div");&nbsp; &nbsp; &nbsp; console.log(liNodes)&nbsp; &nbsp; &nbsp; divNode.appendChild(liNodes[index - 1])&nbsp; &nbsp; &nbsp; divNode.appendChild(liNodes[index])&nbsp; &nbsp; &nbsp; ulNode.appendChild(divNode)&nbsp; &nbsp; }&nbsp; })&nbsp; const dataLength = data.length;&nbsp; if (dataLength % 2 !== 0) {&nbsp; &nbsp; let divNode = document.createElement("div");&nbsp; &nbsp; divNode.appendChild(liNodes[dataLength - 1])&nbsp; &nbsp; ulNode.appendChild(divNode)&nbsp; }&nbsp; fragment.appendChild(ulNode)&nbsp; document.getElementById("app").appendChild(fragment)