Async Fetch/Get Request before For Loop

Question

I'm new to Javascript and am trying to get Images to dynamically add themselves to 'addCache'.

I will then use this with a service worker to add it to the cache.

My sw.js file looks like this:

    var product = [];
    fetch('http://localhost:3000/api/products')
    .then(res => res.json())
    .then(json => product = json)


//Caching Files


  var cacheName = 'pwa-v1';
  var toCache= [
      '/PW1/',
      '/PW1/Apps/calculate.js',
      '/PW1/Apps/login.js',
      '/PW1/Apps/index.js',
      '/PW1/index.html',
      '/PW1/products.html',
      '/PW1/style.css',

];


var productImages = [];

for(var i=0;i<product.length;i++){
    productImages.push('/PW1/img/'+product[i].name+'.jpg');
}
  var addCache = toCache.concat(productImages);

self.addEventListener('install', function(s) {

.............
.............
.............

My goal is to make the fetch request async, it fetches data from backend and stores it into the product array. I want the for loop to wait for the product, then begin the loop. How can I go about doing this?

The for loop just gets the product name, which is the same as the image name.

At the moment it doesn't add any images to add cache. But it does add the rest of the files.

Any help will be appreciated. Thanks in advance.

Just so I understand, you want to wait for the fetch request to complete before you start your for loop? — goto
– goto, Commented Jan 25, 2020 at 18:29
yes, i want my fetch request to complete before the for loop. so i can use the result of the fetch request in for loop. thanks — Calv
– Calv, Commented Jan 25, 2020 at 18:30

Community · Accepted Answer · 2020-06-20 09:12:55Z

Use async/await. As a Promise it guarantees that either a response or rejection of requested data will be returned via the await keyword.

In the demo below the async function getPaths() will pass an endpoint (ie url of JSON) and an optional array (ie cached paths). It returns an array of all given paths. The endpoint is that of a live test server so you should have no problem testing it with your own endpoint. If you do...well you should seriously look into your back-end or Service Worker.

Demo

let toCache = [
  '/PW1/',
  '/PW1/Apps/calculate.js',
  '/PW1/Apps/login.js',
  '/PW1/Apps/index.js',
  '/PW1/index.html',
  '/PW1/products.html',
  '/PW1/style.css'
];

const getPaths = async(endpoint, cache = []) => {
  const response = await fetch(endpoint);
  let data = await response.json();

  data = cache.concat(data.map(product => `/PW1/img/${product.username}.jpg`));
  return data;
}

getPaths('https://jsonplaceholder.typicode.com/users', toCache).then(data => console.log(data));

SanjiMika · Accepted Answer · 2020-01-25 18:40:36Z

Because it's the function asynchronous fetch(), so you must put the code of treatment of response datas in function then()

var products = [];
fetch('http://localhost:3000/api/products')
    .then(res => res.json())
    .then(json => products = json)
    .then(() => {
       // ... treatement of product datas ...
       for(var i=0;i<products.length;i++){
         productImages.push('/PW1/img/'+products[i].name+'.jpg');
       }
     })
   .catch((e) => {
       console.log('Error', e);
    });

With the syntax ES6 JavaScript, I recommend you to use the sugar syntax "async-await" for the asynchronous code in JS. It helps you write the asynchronous code like synchronous code. And for sure, the synchronous code is much easier to understand. You should check the detail of my respone in another famous topic in StackOverFlow : How do I return the response from an asynchronous call?

goto · Accepted Answer · 2020-01-25 18:42:25Z

fetch is asynchronous, so you need to create a callback that will run by calling then and do all the work that relies on the response that you get from calling your API:

// ...

var cacheName = "pwa-v1"
var toCache = ["/PW1/", "/PW1/Apps/calculate.js", ...]

fetch("http://localhost:3000/api/products")
  .then(res => res.json())
  .then(createFileCache)
  .catch(handleError)

function createFileCache(items) {
  var productImages = items.map(
    function(item) {
      return `/PW1/img/${item.name}.jpg`
    }
  )
  toCache.concat(productImages)
}

function handleError(err) {
  // handle errors appropriately
}

// ...

Keep in mind this is asynchronous, so if you need to rely on the new state of toCache somewhere else, then you might want to throw in another callback into the mix.

Simon · Accepted Answer · 2020-01-25 18:54:09Z

0

const toCache= [
      '/PW1/',
      '/PW1/Apps/calculate.js',
      '/PW1/Apps/login.js',
      '/PW1/Apps/index.js',
      '/PW1/index.html',
      '/PW1/products.html',
      '/PW1/style.css',
];
const productImages = [];
fetch('http://localhost:3000/api/products')
    .then(res => res.json())
    .then(products => {
        for (const product of products) {
            productImages.push('/PW1/img/' + product.name + '.jpg');
        }
        let addCache = toCache.concat(productImages);
        // your logic can continue here
    });

Try not to use var, let is better and in your case const is even better since it's more restrictive

answered Jan 25, 2020 at 18:54

Simon

316 bronze badges

Comments

zer00ne · Accepted Answer · 2020-01-29 01:14:07Z

0

You need to put your for loop in a function as an argument to the .then method of the Promise fetch returns, just like your json conversion function

Something like:

var product = [];
var productImages = [];


fetch('http://localhost:3000/api/products')
.then(res => res.json())
.then(json => product = json)
.then(
   function() 
   {
         for(var i=0;i<product.length;i++)
         {
            productImages.push('/PW1/img/'+product[i].name+'.jpg');
         }         
   }
)

edited Jan 29, 2020 at 1:14

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

answered Jan 25, 2020 at 18:42

Freud Chicken

5253 silver badges8 bronze badges

Collectives™ on Stack Overflow

Async Fetch/Get Request before For Loop

5 Answers 5

Demo

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Demo

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related