I have been keeping track of all the movies I watch by storing my data in movies.json. Within movies.json, there are multiple arrays starting with "MarvelMovies" containing 2 movies.
Following that is "ComedyMovies" with another 4 movies listed.
While I am able to console.log all the arrays, I am still working on how to individually display each array (specifically log the MarvelMovies and ComedyMovies separately).
movies.json:
{
"MarvelMovies": [{
"Title": "The Avengers",
"Year": "2012",
"Poster": "https://m.media-amazon.com/images/M/MV5BNDYxNjQyMjAtNTdiOS00NGYwLWFmNTAtNThmYjU5ZGI2YTI1XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_SX300.jpg",
"Ratings": [{
"Source": "Internet Movie Database",
"Value": "8.0/10"
}, {
"Source": "Rotten Tomatoes",
"Value": "91%"
}
...
my js fetch code:
//DOM element
let movieSlider = document.querySelector(".mainSlider"); //Grid for movies
let movieTitle = document.querySelector(".mainSlider__title"); //genre title
fetch('./media/json/movies.json')
.then(response => response.json())
.then((movies) => {
console.log(movies)
// console.log(response);
// });
// .then(movie => {
for (let i = 0; i < movies.length; i++) {
const element = movies[i];
movieSlider.innerHTML += `
<div class="mainSlider__item" style='background:url("${element.Poster}"); background-size:cover;'>
<div class="mainSlider__item-playButton">
<div class="mainSlider__item-title">${element.Title}</div>
<div class="mainSlider__item-info">${element.Year}</div>
<div class="mainSlider__item-desc">${element.Runtime}</div>
</div>
</div>
`
}
});