title: Javascript using Fetch and pagination, recursive?
body: <p>Hello I'm new to Javascript and APIs.</p>
  
  <p>But I have an excersise where I should get Data from.</p>
  
  <p><a href="https://swapi.co/api/planets/" rel="noreferrer">https://swapi.co/api/planets/</a></p>
  
  <p>The problem is that it doesn't list all the planets at once so that URL only shows the first 10 entries while <a href="https://swapi.co/api/planets/?page=2" rel="noreferrer">https://swapi.co/api/planets/?page=2</a> shows the next and so on.</p>
  
  <p>This is my current code, it works but I don't think I'm going as I'm supposed to so I wonder how you would solve this problem.</p>
  
  <p><a href="https://codepen.io/indiehjaerta/pen/QQXVJX" rel="noreferrer">https://codepen.io/indiehjaerta/pen/QQXVJX</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var starWarsAPI = new StarWarsAPI();
  starWarsAPI.Initialize();
  
  function StarWarsAPI()
  {
      this.planets = new Array();
  
      this.Initialize = function()
      {
          this.LoadPlanets("https://swapi.co/api/planets");
      }
  
      this.LoadPlanets = function(aURL)
      {
  
          fetch(aURL).then(
              function (response) 
              {
                  if (response.status !== 200) 
                  {
                      console.log('Looks like there was a problem. Status Code: ' + response.status);
                      return;
                  }
  
                  response.json().then(
                      data =&gt; this.LoadPlanetsRecursive(data)
                  );
              }.bind(this)
          ).catch(function (err) 
          {
              console.log('Fetch Error :-S', err);
          });
      }
  
      
      this.LoadPlanetsRecursive = function(aData)
      {
  
          for (let planet of aData.results)
          {
              let newPlanet = new Planet(planet);
              this.planets.push(newPlanet);
          }
  
          if (aData.next != null)
          {
              fetch(aData.next).then(
                  function (response) 
                  {
                      if (response.status !== 200) 
                      {
                          console.log('Looks like there was a problem. Status Code: ' + response.status);
                          return;
                      }
      
                      response.json().then(
                          data =&gt; this.LoadPlanetsRecursive(data)
                      );
                  }.bind(this)
              ).catch(function (err) 
              {
                  console.log('Fetch Error :-S', err);
              });
          }
      }
  this.PresentPlanetsInHTML = function()
  {
      
  }
  }
  
  function Planet(aPlanet)
  {
      this.name = aPlanet.name;
      console.log(this);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>2nd question is where I should put my "PresentData" so I know that all planets have been loaded and not 1 by 1 when the're added to the array.</p>