After ajax gets the data, how do you rearrange and render the data?

problem description

get a piece of json data using ajax. The data are as follows:
{

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

}

I want to take out the news headlines by year and render them on the page. The structure of the page is as follows:

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

now I don"t know what traversal is like. How can you traverse twice?

Jul.29,2021

this gives you an object that collects titles by year. If the key of json is a numeric string, it will be arranged from small to large by default. So according to your own needs, get the data accordingly

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] = []
}
Menu