Access the data returned in the success of an ajax request, within a $('form'). on('Submit'...)

Question

I have a $('form'). on('Submit', Function()); and inside it I would like to make a call from a function that runs an ajax and returns an array of data. however when saving the return of the function in a variable the same becomes "undifined" it is not possible to do what I want?

Follow the example code:

Fom Submit:

$('#form_independentes').on('submit', function(event) {

    let curso_id = 1;
    let ficheiros = getDocuments_(curso_id);
    // variavél ficheiro fica como undefined

});

Function getDocuments_ :

function getDocuments_(id_curso){
            $.ajax({
                url: '/candidaturas/documents/'+id_curso,
                type: 'GET',
                dataType: 'json',
                success: function( _response ){
                    //este console log mostra um array de objetos
                    console.log(_response.documents)
                    return _response.documents;
                },
                error: function( _response ){
                    Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
                    return false;
                }
            });
        }

Also below is a screenshot of the console showing Undefined and the object array

Answer 1

This is because the function getDocuments_ does not have return. The return inside the property success is not caught by the assignment of the line let ficheiros = getDocuments_(curso_id);.

I suggest you incorporate logic into a function that is called by function of success.

Example

$('#form_independentes').on('submit', function(event) {
    let curso_id = 1;
    getDocuments_(curso_id); //sem atribuicao aqui, pois nao ha retorno
});

function getDocuments_(id_curso){
    $.ajax({
        url: '/candidaturas/documents/'+id_curso,
        type: 'GET',
        dataType: 'json',
        success: function( _response ){
            //este console log mostra um array de objetos
            console.log(_response.documents)
            setFicheiro(_response.documents) //funcao que realiza as tarefas necessarias com o objeto de resposta
        },
        error: function( _response ){
            Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
            return false;
        }
    });
}

There is also the possibility to return the value to variable ficheiro if you use async: false in the ajax. But this functionality is being discontinued and may not work in some browsers. The Chrome and the Firefox, for example already emit warnings when this is done.

Synchronous example

$('#form_independentes').on('submit', function(event) {
    let curso_id = 1;
    let ficheiros = getDocuments_(curso_id);
});

function getDocuments_(id_curso){
    return $.ajax({
        url: '/candidaturas/documents/'+id_curso,
        type: 'GET',
        async: false, // ESPERA O RESULTADO ANTES DE CONTINUAR
        dataType: 'json'
    }).responseText;
}

Answer 2

Ajax requests are async that is, they do not block the normal execution flow of your code. Therefore enas do not return anything at all!

How can you ultairon your problem??
For this it is necessary to adjust your code as follows
HTML:

$('#form_independentes').on('submit', function(event) {

    let curso_id = 1;
    let ficheiros = false;

    $.ajax({
        url: '/candidaturas/documents/'+curso_id,
        type: 'GET',
        dataType: 'json',
        success: function( _response ){
        //este console log mostra um array de objetos
        console.log(_response.documents)
        ficheiros = _response.documents;
        // aqui chame a funcao que vai tratar a sua informacao nesse caso a variavel fixeios
        facaAlgoComOsFicheiros(ficheiros);
    },
    error: function( _response ){
        Materialize.toast('Opps ocorreu um erro. por favor atualize a página e volte a tentar', 4000, 'red');
        //return false;
   }
  });
});