使用模板字符串处理双层遍历

HTML:

<div id="wrapper"></div>

CSS:

#wrapper {
   width: 400px;
}

h3 {
    color: blue;
}

ul>li {
    display: flex;
    justify-content: space-between;
    background: #13b31f;
    color: #fff;
    padding: 0 20px;
}

JS:

<script src="./js/jquery-1.4.4.min.js"></script>
<script>
    let resData = [
        {
            "year": "2022",
            "reports": [
                {
                    name: "常回家看看",
                    createTime: "2021-05"
                },
                {
                    name: "牵手",
                    createTime: "2021-03"
                }
            ]
        },
        {
            "year": "2021",
            "reports": [
                {
                    name: "千年等一回",
                    createTime: "2021-05"
                },
                {
                    name: "月亮代表我的心",
                    createTime: "2021-03"
                }
            ]
        },
        {
            "year": "2019",
            "reports": [
                {
                    name: "彩虹",
                    createTime: "2019-10"
                },
                {
                    name: "一生有你",
                    createTime: "2019-06"
                },
                {
                    name: "最浪漫的事",
                    createTime: "2019-05"
                },
                {
                    name: "一生所爱",
                    createTime: "2019-04"
                }
            ]
        }
    ]

    $(document).ready(function(){
        domRender(resData)
    })

    function domRender(resData){
        $("#wrapper").html("");
        let liItem = "";
        resData.forEach(item => {
            liItem += ` <h3>${item.year}年</h3>
                        <ul>
                            ${
                            	item.reports.map(itm => {
                                    return `<li>
                                            <p>${itm.name}</p>
                                            <p>${itm.createTime}</p>
                                        </li>`
                                }).join('')
                            }
                        </ul> `
        })
        $("#wrapper").append(liItem);
    }
    
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/ca61316c958348d5b9429e41a4368377.png