I am using the Star Wars API https://swapi.co/ I need to pull in starships information, the results for starships span 4 pages, however a get call returns only 10 results per page. How can I iterate over multiple pages and get the info that I need?

I have used the fetch api to GET the first page of starships and then added this array of 10 to my totalResults array, and then created a While loop to check to see if 'next !== null' (next is the next page property in the data, if we were viewing the last page i.e. page 4, then next would be null next = null) So as long as next does not equal null, my While loop code should fetch the data and add it to my totalResults array. I have changed the value of next at the end, but it seems to looping forever and crashing.

function getData() {

    let totalResults = [];



    fetch('https://swapi.co/api/starships/')

        .then( res => res.json())

        .then(function (json) {

            let starships = json;

            totalResults.push(starships.results);

            let next = starships.next;



            while ( next !== null ) {

                fetch(next)

                .then( res => res.json() )

                .then( function (nextData) {

                    totalResults.push(nextData.results);

                    next = nextData.next;

                })

            }



        });      

}

Code keeps looping meaning my 'next = nextData.next;' increment does not seem to be working.