如何在js中显示来自json的对象答案

【问题标题】：How to display object from json in js如何在js中显示来自json的对象
【发布时间】：2021-12-19 16:02:33
【问题描述】：

我有json码

{
    "dezui": {
        "title": "DezUI CSS Framework",
        "description": "",
        "organizer": [""],
        "status": true,
        "homepage": "",
        "link": [""],
        "date": [18, 10, 2021],
        ...
    },
    ...
}

我想在我的页面中显示循环。之前的json代码：

{
    "portfolio": [
        {
            "title": "DezUI CSS Framework",
            "description": "",
            "organizer": [""],
            "status": true,
            "homepage": "",
            ...
        },
        ...
    ]
}

使用前面的代码，我用下面的代码显示数据：


fetch("/portfolio/portfolio.json")
.then(response => {return response.json()})
.then(data => {
    for (let i = 0; i < data.portfolio.length; i++) {
        if (data.portfolio[i].status == true) {
            document.getElementById("portfolio").innerHTML += `<div id="card-project"><div id="thumbnail"><a href="/portfolio/${data.portfolio[i].homepage}"><img src="/portfolio/thumbnails/${data.portfolio[i].thumbnail}"></a></div><h6 id="tag">${data.portfolio[i].tag}</h6><h6 id="title"><a href="/portfolio/${data.portfolio[i].homepage}">${data.portfolio[i].title}</a></h6></div>`
        }
    }
})

我很困惑如何以对象的形式显示（？）

请帮帮我

【问题讨论】：

这可能对你有帮助：stackoverflow.com/a/69848483/17331609

标签： javascript arrays json object associative-array

【解决方案1】：

由于您的数据形状发生了变化，您需要更新您的代码。您不再需要遍历它，因为只有一个条目。因此，您可以引用该对象并将其从portfolio 更改为dezui。例如：

fetch("/portfolio/portfolio.json")
    .then(response => {return response.json()})
    .then(data => {
        if (data.dezui.status == true) {
            document.getElementById("portfolio").innerHTML += `<div id="card-project"><div id="thumbnail"><a href="/portfolio/${data.dezui.homepage}"><img src="/portfolio/thumbnails/${data.dezui.thumbnail}"></a></div><h6 id="tag">${data.dezui.tag}</h6><h6 id="title"><a href="/portfolio/${data.dezui.homepage}">${data.dezui.title}</a></h6></div>`
    }
})

【讨论】：