title: JS fetch in do while loop
body: <p>I would like to fetch data from the API using JS fetch. In this API, 100 records can be fetched at a time. Therefore, I am trying to loop the fetch into a &quot;do while&quot; loop. Where I want to execute it until there are no more records i.e. when the condition apiData.length &gt; 0 is not met.
  Unfortunately due to the asynchronicity of apiData.length = 0 when it is checked.</p>
  <p>How to solve this problem of having to run fetch multiple times when we don't know this tuple and when we need something from the data in the API (length of the response array) to indirectly determine it?</p>
  <pre><code>let apiData = [];
  let apiPage = 1;
  
  do {
      fetch(&quot;https://test.traffit.com/public/job_posts/published&quot;, {
          headers: {
              &quot;Content-Type&quot;: &quot;application/json&quot;,
              &quot;X-Request-Page-Size&quot;: &quot;100&quot;,
              &quot;X-Request-Current-Page&quot;: apiPage,
              &quot;X-Request-Sort&quot;: '{&quot;sort_by&quot;: &quot;id&quot;, &quot;direction&quot;: &quot;ASC&quot;}'
          },
      })
          .then((response) =&gt; response.json())
  
          .then((response) =&gt; {
              apiData = response;
              showDataInHtml();
              apiPage = apiPage + 1;
          })
  
          .catch((error) =&gt; console.log(&quot;Error: &quot;, error));
  } while (apiData.length &gt; 0);
  
  const showDataInHtml = () =&gt; {
  // do something
  }
  </code></pre>