js 單一有序數(shù)據(jù)結(jié)構(gòu) 如何在頁面在生成雙層有序的列表

有如下數(shù)據(jù)：

{
    "data": [
        {
            "title": "標(biāo)題1",
            "link": "",
            "date": "2018-6-26",
            "views": 153,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題2",
            "link": "",
            "date": "2018-6-25",
            "views": 460,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題3",
            "link": "",
            "date": "2018-6-24",
            "views": 392,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題4",
            "link": "",
            "date": "2018-6-23,
            "views": 318,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題5",
            "link": "",
            "date": "2018-6-22",
            "views": 241,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題6",
            "link": "",
            "date": "2018-6-21",
            "views": 283,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        },
        {
            "title": "標(biāo)題7",
            "link": "",
            "date": "2018-6-20",
            "views": 216,
            "info": "簡述簡述簡述簡述簡述簡述簡述"
        }
    ]
}

html結(jié)構(gòu)如下

<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如何用如上數(shù)據(jù)循環(huán)生成這樣的有序html結(jié)構(gòu)？

回答

編輯回答

你的瞳

    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>'

2018年6月2日 06:12

編輯回答

夕顏

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>

2018年7月19日 21:10

編輯回答

凹凸曼

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)

2017年11月4日 18:24