JS如何遍历JSON结构中的对象并将数据渲染到前端页面

你可以用Object.values()方法将外层对象的所有属性值提取为数组，之后就可以复用你之前的数组遍历逻辑，几乎不需要调整原有渲染代码。

修改后的完整代码如下：

fetch("/portfolio/portfolio.json")
.then(response => {return response.json()})
.then(data => {
    // 把外层对象的所有项目配置提取为数组，结构和你之前的portfolio数组完全一致
    const projectList = Object.values(data)
    for (let i = 0; i < projectList.length; i++) {
        const project = projectList[i]
        if (project.status == true) {
            document.getElementById("portfolio").innerHTML += `<div class="card-project"><div class="thumbnail"><a href="/portfolio/${project.homepage}"><img src="/portfolio/thumbnails/${project.thumbnail}"></a></div><h6 class="tag">${project.tag}</h6><h6 class="title"><a href="/portfolio/${project.homepage}">${project.title}</a></h6></div>`
        }
    }
})

如果你后续需要用到外层的键名（比如示例中的dezui），可以改用Object.entries()同时获取键和值：

const projectEntries = Object.entries(data)
for (let i = 0; i < projectEntries.length; i++) {
    // key为外层键名，project为对应项目配置对象
    const [key, project] = projectEntries[i]
    // 后续渲染逻辑和上面保持一致即可
}

注：你原有代码中循环生成的DOM元素使用了重复的id属性，id在单页面中必须唯一，上面代码已经把重复id调整为class属性，避免样式和选择器出现异常。

内容的提问来源于stack exchange，提问作者dezuhan