WMS Iterating through an Array of getFeatureInfo URLs to fetch the response randomizes the order of received values

Question

Background: Using Openlayers and Geoserver, I´ve got a WMS layer like in the pic below which has two distinct Viewparameters that can that can take 5 and 7 values respectively. Combinig those two, I can get a total of 35 distinct values. I want to implement a function that fills a table with all of these values (7 rows, 5 columns) when you click on a country. WMS Layer

For that I first generate an Array of 35 unique getFeatureInfo Urls like this http://localhost:8080/geoserver/abschluss/wms?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=abschluss&LAYERS=abschluss&TILED=true&CRS=EPSG%3A3857&VIEWPARAMS=year%3A2000%3Bcode%3A1&INFO_FORMAT=application%2Fjson&I=106&J=72&WIDTH=256&HEIGHT=256&STYLES=&BBOX=0%2C5009377.085697312%2C2504688.5428486555%2C7514065.628545968 using for-loops and the url.replace function. That however is not the problem.

let value = [];
for (i = 0; i<5; i++) {
  const url = urlArray[i];
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((jsonResponse) => {
        const jsonObject = JSON.parse(jsonResponse);
        value.push(jsonObject.features[0].properties.year);
        
      });
  } 

}

With this I would like to iterate through the first 5 elements of my urlArray, fetch the response as a JSON Object, extract the desired values and write those into a new array, which is then used to fill one row in an HTML table. Using console.log(value); I could see that this does indeed give me the values I want, however the order seems random. And each time I click on the country the order changes completely. Why does this happen, and what can I do to fix this?

To maybe give you a better understanding, I include the whole function as it is now:

map.on('singleclick', function (evt) {
document.getElementById('gfi').innerHTML = '';
const viewResolution = /** @type {number} */ (view.getResolution());
var url = sourceValues.getFeatureInfoUrl(
  evt.coordinate,
  viewResolution,
  'EPSG:3857',
  {'INFO_FORMAT': 'application/json'},
  {'VIEWPARAMS': 'code:1;year:1990'}
);

let yearArray = [1995,2000,2005,2010,2015];

urlArray = [];

for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 1, 'code%3A' + 2);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 2, 'code%3A' + 3);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 3, 'code%3A' + 4);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 4, 'code%3A' + 5);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 5, 'code%3A' + 6);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990);
for(let i = 0; i < yearArray.length; i++) {
  year = yearArray[i];
  url = url.replace('year%3A' + (year-5), 'year%3A' + year).replace('code%3A' + 6, 'code%3A' + 7);
  urlArray.push(url);
}
url = url.replace('year%3A' + (2015), 'year%3A' + 1990).replace('code%3A' + 7, 'code%3A' + 1);;
console.log(urlArray);

let value = [];
for (i = 0; i<5; i++) {
  const url = urlArray[i];
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((jsonResponse) => {
        const jsonObject = JSON.parse(jsonResponse);
        value.push(jsonObject.features[0].properties.year);
        
      });
  } 

}

console.log(value);

});

Answer 1

fetch is an asynchronous Promise and the order the responses are received will how quickly on the server handles the request, which may depend on the complexity of the query and the data. To handle the responses in a fixed order use Promise.all see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

let value = [];
let fetches = [];
for (i = 0; i<5; i++) {
  const url = urlArray[i];
  if (url) {
    fetches.push(fetch(url));
  }
}
Promise.all(fetches).then((responses) => {
  responses.forEach((response) => {
    ...
  }); 
});