Get attribute from multiple WMS sources

Question

I'm using GeoServer and I need to put the value of NDVI from four different wms into a chart. I'm using also OpenLayer for my map.

map.on('singleclick', function(evt) {
  var viewResolution = view.getResolution();

  var ndvi_array = [], ndvi_20200706, ...

  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20200706);
    fetch(url_20200706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        var ndvi_20200706 = json.properties.GRAY_INDEX;
  
      }).catch((error) => {
        console.warn(error)
      });
  console.log("NDVI 6 luglio 2020: "+ndvi_20200706);
  ndvi_array.push(ndvi_20200706);
  
   var url_20190706 = sourceNDVI_20190706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20190706);
    fetch(url_20190706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        var ndvi_20190706 = json.properties.GRAY_INDEX;
  
      }).catch((error) => {
        console.warn(error)
      });
  
.
.
.

console.log("Array: "+ndvi_array);

});

I'm be able to see on the map all wms.

EDIT 1

Probably my question isn't clear and I've edit the code with all my purpouse. What I want to do is put the NDVI index of all WMS into an array because I need to use an array for a chart.

EDIT 2(after @Mike indications)

I've edited all code, now in console log I see this when I click on a point:

NDVI 6 luglio 2020: undefined Array:

Answer 1

The code in the data callback is asynchronous and won't run until after the console.log. Also you have redeclared ndvi_20200706 by using var in the callback

You could simply set a timeout and hope all your results are in after 5 seconds

  var viewResolution = view.getResolution();

  var ndvi_array = [], ndvi_20200706, ...

  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  console.log(url_20200706);
    fetch(url_20200706)
      .then(function (response) {
        return response.text(); })
      .then(function (data) {
  
        var json = JSON.parse(data).features[0];
  
        ndvi_20200706 = json.properties.GRAY_INDEX;
        ndvi_array.push(ndvi_20200706);
  
      }).catch((error) => {
        console.warn(error)
      });

setTimeout(function(){
  console.log("NDVI 6 luglio 2020: "+ndvi_20200706);
  console.log("ndvi_array: "+ndvi_array);
}, 5000);

But it would be better to wait for all the fetches to complete and handle the results together, something like

map.on('singleclick', function(evt) {
  var viewResolution = view.getResolution();

  var fetches = [];
  var url_20200706 = sourceNDVI_20200706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  fetches.push(fetch(url_20200706)
    .then(function (response) {
      return response.text(); }));

  var url_20190706 = sourceNDVI_20190706.getFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:3857',
    {
      'INFO_FORMAT': 'application/json',
      'propertyName': 'GRAY_INDEX',
    });
  fetches.push(fetch(url_20200706)
    .then(function (response) {
      return response.text(); }));

  Promise.all(fetches).then(function(results) {
    var ndvi_array = [];
    results.forEach(function (data) {
      var json = JSON.parse(data).features[0];
      var ndvi_20200706 = json.properties.GRAY_INDEX;
      ndvi_array.push(ndvi_20200706);
    });
    console.log("ndvi_array: "+ndvi_array);

    // continue your processing here

  });
});

For more info including error handling see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all