ajax获取到数据后，如何对数据重新排列并渲染？

Question

问题描述

用ajax获取到一段json数据，数据如下：
{

"news": [
    {
        "title": "标题1",
        "time": "2018"
    },
    {
        "title": "标题2",
        "time": "2018"
    },
    {
        "title": "标题3",
        "time": "2017"
    },
    {
        "title": "标题4",
        "time": "2016"
    }
]

}

我想按年份把新闻标题分别取出来，然后渲染在页面上，页面的结构如下：

<div class="wrap">

<div class="year">
    <span>2018</span>
    <ul>
        <li>标题1</li>
        <li>标题2</li>
    </ul>
</div>
<div class="year">
    <span>2017</span>
    <ul>
        <li>标题3</li>
    </ul>
</div>
<div class="year">
    <span>2016</span>
    <ul>
        <li>标题4</li>
    </ul>
</div>

</div>

现在不知道遍历的思路是什么样的...怎么能进行两次的遍历呢？

Answer 1

这样可以得到一个按年份集合标题的对象。又json的key如果是数字型字符串的话，会默认从小到大排。所以按照自己的需要，再相应的去取数据吧

let news = [
    {
        "title": "标题1",
        "time": "2018"
    },
    {
        "title": "标题2",
        "time": "2018"
    },
    {
        "title": "标题3",
        "time": "2017"
    },
    {
        "title": "标题4",
        "time": "2016"
    }
]
let obj = {}
news.forEach(item => {
    obj[item.time] || (obj[item.time] = [])
    obj[item.time].push(item.title)
})

obj[item.tiem] || (obj[item.tiem] = []) // 在这的用处可以理解为下面代码的运行结果

if (!obj[item.time]) {
    obj[item.tiem] = []
}