从.json文件中获取并解析多个arrays

Question

I'm making a collection of all the movies I've watched and I keep all my data in movies.json. In movies.json there are multiple arrays, the first one being "MarvelMovies" with 2 movies in.

Next is "ComedyMovies" with also 4 movies.

I can console.log all the arrays, but I haven't figured out how to console.log each array (console.log the MarvelMovies array 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%"
            }, {
                "Source": "Metacritic",
                "Value": "69/100"
            }],
            "Metascore": "69"

            
        }, {


            "Title": "Avengers: Age of Ultron",
            "Year": "2015",
            "Rated": "PG-13",
            "Released": "01 May 2015",
            "Runtime": "141 min",
            "Genre": "Action, Adventure, Sci-Fi",
            "Director": "Joss Whedon",
            "Writer": "Joss Whedon, Stan Lee (based on the Marvel comics by), Jack Kirby (based on the Marvel comics by), Joe Simon (character created by: Captain America), Jack Kirby (character created by: Captain America), Jim Starlin (character created by: Thanos)",
            "Actors": "Robert Downey Jr., Chris Hemsworth, Mark Ruffalo, Chris Evans",
            "Plot": "When Tony Stark and Bruce Banner try to jump-start a dormant peacekeeping program called Ultron, things go horribly wrong and it's up to Earth's mightiest heroes to stop the villainous Ultron from enacting his terrible plan.",
            "Language": "English, Korean",
            "Country": "USA",
            "Awards": "8 wins & 49 nominations.",
            "Poster": "https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_SX300.jpg",
            "Ratings": [{
                "Source": "Internet Movie Database",
                "Value": "7.3/10"
            }, {
                "Source": "Rotten Tomatoes",
                "Value": "75%"
            }, {
                "Source": "Metacritic",
                "Value": "66/100"
            }],
            "Metascore": "66",
            "imdbRating": "7.3",
            "imdbVotes": "759,059",
            "imdbID": "tt2395427",
            "Type": "movie",
            "DVD": "08 Sep 2015",
            "BoxOffice": "$459,005,868",
            "Production": "Marvel Studios",
            "Website": "N/A",
            "Response": "True"
        }


    ],
    "ComedyMovies": [{
            "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%"
            }, {
                "Source": "Metacritic",
                "Value": "69/100"
            }],
            "Metascore": "69"

            
        }, {


            "Title": "Avengers: Age of Ultron",
            "Year": "2015",
            "Rated": "PG-13",
            "Released": "01 May 2015",
            "Runtime": "141 min",
            "Genre": "Action, Adventure, Sci-Fi",
            "Director": "Joss Whedon",
            "Writer": "Joss Whedon, Stan Lee (based on the Marvel comics by), Jack Kirby (based on the Marvel comics by), Joe Simon (character created by: Captain America), Jack Kirby (character created by: Captain America), Jim Starlin (character created by: Thanos)",
            "Actors": "Robert Downey Jr., Chris Hemsworth, Mark Ruffalo, Chris Evans",
            "Plot": "When Tony Stark and Bruce Banner try to jump-start a dormant peacekeeping program called Ultron, things go horribly wrong and it's up to Earth's mightiest heroes to stop the villainous Ultron from enacting his terrible plan.",
            "Language": "English, Korean",
            "Country": "USA",
            "Awards": "8 wins & 49 nominations.",
            "Poster": "https://m.media-amazon.com/images/M/MV5BMTM4OGJmNWMtOTM4Ni00NTE3LTg3MDItZmQxYjc4N2JhNmUxXkEyXkFqcGdeQXVyNTgzMDMzMTg@._V1_SX300.jpg",
            "Ratings": [{
                "Source": "Internet Movie Database",
                "Value": "7.3/10"
            }, {
                "Source": "Rotten Tomatoes",
                "Value": "75%"
            }, {
                "Source": "Metacritic",
                "Value": "66/100"
            }],
            "Metascore": "66",
            "imdbRating": "7.3",
            "imdbVotes": "759,059",
            "imdbID": "tt2395427",
            "Type": "movie",
            "DVD": "08 Sep 2015",
            "BoxOffice": "$459,005,868",
            "Production": "Marvel Studios",
            "Website": "N/A",
            "Response": "True"
        }


    ]
}

my js fetch code:

//DOM element
let movieSlider = document.querySelector(".mainSlider") //Grid til film
let movieTitle = document.querySelector(".mainSlider__title"); //genre titel
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>
        `


    }
});

Answer 1

If you don't know the property names and also you don't need them. (They seem like categories). You can use Object.values and Array.flat methods to retrieve an array that contains just movies like below:

const json = `your json`
const movies = Object.values(json).flat();
console.log(movies);

Answer 2

 const json = `your json` const movies = Object.values(json).flat(); console.log(movies);