I have json code
{
"dezui": {
"title": "DezUI CSS Framework",
"description": "",
"organizer": [""],
"status": true,
"homepage": "",
"link": [""],
"date": [18, 10, 2021],
...
},
...
}
I want to display with loop in my page. Previous json code:
{
"portfolio": [
{
"title": "DezUI CSS Framework",
"description": "",
"organizer": [""],
"status": true,
"homepage": "",
...
},
...
]
}
With the previous code, I display the data with the code below:
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>`
}
}
})
I'm confused how I display in the form of an object(?)
Please help me
Since your data shape changed you'll need to update your code. You no longer need to loop through it as there is only one entry. So you can reference that object and change it from portfolio to dezui. ex:
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>`
}
})