here is my html code:
<div id="card-container" class="card-container"></div>
<!-- card and ftech data from.json -->
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('data/data.json') // Adjust the path if needed
.then(response => response.json())
.then(jsonData => {
const container = document.getElementById('card-container');
jsonData.forEach(movie => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<img src="${movie.image}" class="card-img-top" alt="${movie.movie_Name}">
<div class="card-body">
<h5 class="card-title">${movie.movie_Name}</h5>
<p class="card-text">Release Date: ${movie.release_Date}<br>
Director: ${movie.director}<br>
Location: ${movie.location}<br>
Genre: ${movie.genre}</p>
<a href="#" class="btn btn-primary">More Details</a>
</div>
`;
container.appendChild(card);
});
})
.catch(error => console.error('Error fetching JSON:', error));
});
</script>
here is my .json file:
{
"id": 1,
"movie_Name": "Mission: Cross",
"release_Date": "August 9, 2024",
"director": "Lee Myeong-hun",
"location": "South Korea",
"genre": "Action/Comedy",
"image": "/img/MissionCross.jpg"
},
I already try many way, but still it didn’t work. can someone help me?
here is the output I get:
enter image description here