AJAX callback to retrieve layers name from GeoServer fails with an assertion error

Question

I'm writing something to get all the layers names from my GeoServer. This is my code:

function getData() {
    return $.ajax({
        url: "http://localhost:8080/geoserver/ows?service=wms&version=1.1.0&request=GetCapabilities",
        type: 'GET'
    });
}

function onComplete(data) {

    var parser = new ol.format.WMSCapabilities();
    var result = parser.read(data.responseText);

    var layersArray = result.Capability.Layer.Layer;
    layersNameArray = [];

    for(i=0;i<layersArray.length;i++){
        layersNameArray.push(layersArray[i].Name)
    }

    return layersNameArray
}

getData().done(onComplete)

I'm far from an expert with asynchronous calls, but I think this one is supposed to work. If I stock the getData() result in a variable and run the onComplete() function line by line, the code works. But when I run the code with getData().done(onComplete), it always fails at the var result = parser.read(data.responseText);line with Assertion error: Failure.

Any idea why this isn't working ?

Edit:

This code works, but nothing is returned. I want the function to output the layersNameArrayvariable. How should I proceed ?

function getData() {
    $.ajax({
        url: "http://localhost:8080/geoserver/ows?service=wms&version=1.1.0&request=GetCapabilities",
        type: 'GET',
        success: function(response) {
            var parser = new ol.format.WMSCapabilities();
            var result = parser.read(response);

            var layersArray = result.Capability.Layer.Layer;
            layersNameArray = [];

            for(i=0;i<layersArray.length;i++){
                layersNameArray.push(layersArray[i].Name)
            }

            return layersNameArray
        }
    });
}

Answer 1

You can make use of the Jquery callback feature,

make a call to your function this way,

getData(function(responsefromAjax){
   alert('the response from ajax is :' +responsefromAjax);
  // what ever logic that needs to run using this ajax data
 });

And the make change to your method this way.

function getData(callback) { // passing the function as parameter
    $.ajax({
        url: "http://localhost:8080/geoserver/ows?service=wms&version=1.1.0&request=GetCapabilities",
        type: 'GET',
        success: function(response) {
            var parser = new ol.format.WMSCapabilities();
            var result = parser.read(response);

            var layersArray = result.Capability.Layer.Layer;
            layersNameArray = [];

            for(i=0;i<layersArray.length;i++){
                layersNameArray.push(layersArray[i].Name)
            }

            callback(layersNameArray); //this will execute your function defined during the function call. As you have passed the function as parameter.
        }
    });
}

Let me know if this helps