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++) {

    let div = `<div>${data[i].title}</div>`

    html += i % 2 === 0 ? `<li>` + div : div + `</li>`

}

if (data.length % 2 === 1) {

    html += `</li>`

}

html = `<ul>${html}</ul>

Answer 2

    var html = ''

    for(let i=0;i<a.data.length;i++){

        var _html = ''

        for(let o in a.data[i]){

            _html+=`<div>${a.data[i][o]}</div>`

        }

        html+='<li>'+_html+'</li>'

    }

    document.getElementById("app").innerHTML = '<ul>'+html+'</ul>'

Answer 3

let fragment = document.createDocumentFragment();

  let ulNode = document.createElement("ul");

  let liNodes = []

  data.map((item, index) => {

    let liNode = document.createElement("li");

    liNode.innerHTML = item.title

    liNodes.push(liNode)

    if (index % 2 !== 0) {

      let divNode = document.createElement("div");

      console.log(liNodes)

      divNode.appendChild(liNodes[index - 1])

      divNode.appendChild(liNodes[index])

      ulNode.appendChild(divNode)

    }

  })

  const dataLength = data.length;

  if (dataLength % 2 !== 0) {

    let divNode = document.createElement("div");

    divNode.appendChild(liNodes[dataLength - 1])

    ulNode.appendChild(divNode)

  }

  fragment.appendChild(ulNode)

  document.getElementById("app").appendChild(fragment)