Return array from fetched WMS GetCapabilities request

Question

I'm trying to return an array of time values from a WMS Layer I have to populate a dropdown menu in Openlayers. I have been able to get a list of time values in the layer inside a function (and print this output to the console in the function), but cannot get get this array out of the function. Current code is below:

var url = **working_WMS_url**

var GetCaps = new ol.format.WMSCapabilities();
fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      var result = GetCaps.read(text);
      var times = result.Capability.LayerLayer[0].Dimension;
      return times;
});
console.log(times);

// Section below links and populates dropdown menu
var time_list = document.getELementById("time_list");

for(var i = 0; i < times.length; i++) {
    var opt = times[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    time_list.appendChild(el);
}

To confirm, the dropdown menu works correctly, I tested with a manually defined set of times. I just can't work out why the list "times" isn't returned from the function.

For clarity, I am relatively new to javascript but not coding in general so apologies if there is a very simple solution to this. I've spent the last hour looking through StackOverflow questions but couldn't find one that answered exactly this problem.

score 3 · Accepted Answer · edited Mar 11 '23 at 10:47

3

fetch operates asynchronously so all processing which depends on the text having been read from the url should be in the final then clause of the fetch.

An alternative (not supported on all browsers) is to declare the calling function asynchronous and use an await statement

async function myFunction(url, elementId) {

  var GetCaps = new ol.format.WMSCapabilities();
  var times = await fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      var result = GetCaps.read(text);
      console.log(result);
      var times = result.Capability.Layer.Layer[0].Dimension;
      return times;
  });
  console.log(times);

  // Section below links and populates dropdown menu
  var time_list = document.getElementById(elementId);

  for(var i = 0; i < times.length; i++) {
    var opt = times[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    time_list.appendChild(el);
  }
}

myFunction('working_WMS_url', 'time_list');

edited Mar 11 '23 at 10:47

Jonathan

894
2
9
20

answered Aug 30 '19 at 11:29

Mike

16,042
2
14
30

Thank you for your response! I've amended my code to include this async function but I am no getting the error, `ReferenceError: regeneratorRuntime is not defined`. – JackLidge Aug 30 '19 at 12:45
Some environments need a polyfill e.g. https://stackoverflow.com/questions/51332149/node-js-async-await-error-regeneratorruntime – Mike Aug 30 '19 at 12:57
Will investigate installing Babel then! (I had wondered why it was in all the Google searches for that error) – JackLidge Aug 30 '19 at 13:14
using `import "regenerator-runtime/runtime" `fixed it. Thanks! – JackLidge Aug 30 '19 at 13:21

Return array from fetched WMS GetCapabilities request

1 Answers1