i was trying to make card in html for each object in the JSON file.
JS File
fetch('2D.json')
.then((response) => response.json())
.then((json) => console.log(json))
.then((json) => {
json.data.forEach(ele => { //Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
const wrapper = document.createElement('div');
document.innerHTML = `<img src="${ele.Image}">
<h3 class="card-title">${ele.Title}</h3>
<p calss="card-description">${ele.Description}</p>`
});
}) ;
I’m using fetch to get the Json data and then trying using the data provided by the Json to make card by having div element that have img, title, and description inside it.
but i’m having a problem where the JS couldn’t read the data from the json file provided. what should i do..?
JSON File (dummy data)
[
{
"Title": "3tene (PRO+Live2D DLC)",
"Description": "Freemium",
"Url": "https://3tene.com/series_purchase/",
"Image": "https://images.unsplash.com/photo-1715329499545-f57d711c8209?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Tags": "Tracking"
},
{
"Title": "Animaze",
"Description": "Subscription",
"Url": "https://store.steampowered.com/app/1364390/Animaze_by_FaceRig/",
"Image": "https://images.unsplash.com/photo-1718002127392-92a7eef514ad?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
"Tags": "Tracking"
}
}
]
tbh, I don’t really know what am i doing with the code, I just want to make something and i copy someone’s snippets and hope it works
my thought process:
Json => read => data => process => make card for each object
user25617029 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
.then((json) => console.log(json))
console.log returns undefined, so undefined is what gets passed into the next .then. You need to re-return json:
.then(json => {
console.log(json);
return json;
})
Or, you can just move the console.log to the next .then
fetch('2D.json')
.then((response) => response.json())
.then((json) => {
console.log(json);
json.data.forEach(ele => {
// ...
);
});