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)