title: Creating recursive Observable loop?
body: <p>I have a hard time figuring out how to create a recursive loop to api calls with Observables.</p>
  
  <p>Scenario:
  I call external API, which returns something like this:</p>
  
  <pre><code>{
   data: {something, something, something},
   next: "url for next set of data"
  }
  </code></pre>
  
  <p>I need to keep on calling the same function to gather all the data into a single object as long as the response has value in the <code>next</code>.</p>
  
  <p>I managed to do this on another project with Promises where I map the data returned into single array by using the <code>concat()</code> function but I somehow cannot get my head around understanding how I should do this with <code>Observables</code>.</p>
  
  <p>Working example with using promises:</p>
  
  <pre><code>getData: function(url, params, headers){
      return new Promise((resolve, reject) =&gt; {
          axios.get(url, {
              params: params,
              headers: headers,
          }).then((response) =&gt; {
              let responseData = response.data.data[0];
              if (response.data.next) {
                  this.getData(response.data.next, {}).then((resp) =&gt; {
                      for (let dataSet of responseData.dataSets) {
                          let row = resp.dataSets.find(i =&gt; i.variable === dataSet.variable)
                          if (row) {
                              dataSet.data = dataSet.data.concat(row.data)
                          }
                      }
                      resolve(responseData);
                  }).catch((error) =&gt; {
                      reject(error)
                  })
  
              } else {
                  resolve(responseData);
              }
          }).catch(error =&gt; {
              reject(error)
          })
      })
  }
  </code></pre>