billy-starwars.js

//Function to get all the characters from the passed data
    const getCharacters = (charArray) => {
        //With that array of data map it and return a fetch for each of them
        return charArray.map(url => fetch(url).then(res => res.json()))
    }
    //Call all the films
    fetch(`http://swapi.co/api/films/`)
        //Convert response to json
        .then(res => res.json())
        //Get the results
        .then(films => {
            //For each of the films get that one film
            films.results.forEach(film => {
                //Pass the array of characters to the getCharacters function
                //Using Promise.all wait until it is all done
                Promise.all(getCharacters(film.characters))
                    //Get that characters back
                    .then(res => {
                        //Make some containers
                        const $container = $('<section>');
                        const $movieTitle = $('<h2>').text(film.title);
                        const $characterContainer = $('<ul>');
                        //iterate over the characters
                        res.forEach(char => {
                            //Create li for each
                            $characterContainer.append(`<li>${char.name}</li>`);
                        });
                        //Append to container
                        $container.append($movieTitle,$characterContainer);
                        //Append to main
                        $('main').append($container);
                    })
            });
        });