Use AJAX return in other functions

Navigation
1

I have 2 functions: function1 returns a JSON via AJAX and lists the data in an HTML table dynamically, so far everything works. Function2 needs to handle the same data, however, I did not want to make another AJAX request by invoking function1 again and since the data is already on the client side. I'm currently using a global variable that stores the AJAX return, so I use it in other functions, but I know that global variable is not a good practice. Is it possible to store AJAX return data in a non-global variable and use it in other functions?

Function code 1: 

//Variavel com escopo global para guardar os dados da consulta
//Quando é feito uma requisição AJAX na função listarRegistros
dadosJson = [];
paginaAtual = 0;

//Função para listar registros de qualquer tabela via AJAX
//Passado o NOME da TABELA conforme o que está no bando de dados
function listarRegistros(tabela, form, input, pagina, nomeModal) {

    var qtde = $("#cbo-qtde-registros").val();

    //Abrindo reguisição AJAX e definindo parametros
    $.ajax({
        type: 'POST',
        url: '../file/crud-cad-redes.php?op=lista-all' + '&tabela=' + tabela,
        dataType: 'JSON',
        success: function (dados) {
            if (dados) {
                //Se a consulta retornar os dados é chamado a função para montar a tabela
                dadosJson = dados;//setando variavel global para armazenar os dados de retorno do AJAX
                montaTabela(dados, tabela, pagina, qtde, nomeModal);
                limparInputs();
            } else {
                alert('erro');
            }
        }
    });
    return false;
}

Function code 2: 

//Função para montar tabela com arrays JSON
function montaTabela(dados, tabela, pagina, qtde, nomeModal) {
    //Limpa o body da respectiva tabela
    $('#' + tabela + ' > tbody > tr').remove();
    var tbody = $('#' + tabela + ' > tbody');

    //Chamando a função para listar as colunas da tabela e atribuindo o retorno na variavel
    var arrColunas = listaColunasTabela(tabela);

    //Loop para montar as linhas com cada registro do array JSON da consulta - sistema de paginação
    for (var i = pagina * qtde; i < dados.length && i < (pagina + 1) * qtde; i++) {
        tbody.append(
                //Em cada iteração é chamado a função para montar as colunas da linha
                '<tr>' + montaColunas(dados[i], arrColunas, nomeModal) + '</tr>'
                );
    }

    //Setando valor do input text da navegação da paginação e ajustando os botoes da paginação
    $('#txt-navegacao').val(('Página ' + (pagina + 1) + ' de ' + Math.ceil(dados.length / qtde)));
    ajustarBotoes(pagina, qtde, dados);
}

//Função para montar as colunas e seus atributos de cada linha da tabela
function montaColunas(dados, arrColunas, nomeModal) {
    
    //Recuperando o primeiro elemento do array JSON para saber a
    //A qtde de colunas (cabeçalho da tabela enviado pela consulta SLQ) e
    //Recuperar as keys do elemento (nomes dos cabeçalhos de cada registro)
    var elemento = Object.keys(dados);
    var colunas = '';

    //Loop para montar as colunas - Neste caso do ultimo para o primeiro registro do array JSON
    for (var j = elemento.length - 1; j >= 0; j--) {

        //Loop para iterar o array de colunas da tabela HTML
        for (var k = 0; k < arrColunas.length; k++) {

            //Verifica se nome da classe do array de colunas da tabela HTML é
            //igual ao nome da key do elemento do array JSON da consulta
            //Se for igual a coluna é exibida na tabela, caso contrario e desconsiderada
            if (arrColunas[k] == elemento[j]) {

                //Na posição 0 do loop é chamado a função para montar os dados da respectiva coluna
                if (j == 0) {
                    colunas += montaDadosColuna(dados, elemento, nomeModal) + '</td>';

                    //Nas demais posições é adicionado as colunas HTML e os seus valores normalmente
                } else {
                    colunas += '<td>' + dados[elemento[j]] + '</td>';
                }
            }
        }
    }

    //Retornando o resultado para a função MontaTabela
    return colunas;
}

//Função para montar a coluna com os dados para selecionar posteriormente
function montaDadosColuna(dados, elemento, nomeModal) {
    var coluna = '<td';

    //Loop para inserir os DATAs no respectiva TD da tabela
    for (var i = elemento.length - 1; i >= 0; i--) {

        //É adicionado o DATA + a key do elemento do array JSON
        coluna += ' data-' + elemento[i] + '="' + dados[elemento[i]] + '"';
    }

    //Fechando a tag TD é adicionado um icone com a classe para selecionar o registro na tabela posteriormente
    //Os DATAs são utilizado no momento do click deste icone para preencher o formulario
    coluna += '><img src="../img/btn_modal_05.png" height="20px" style="cursor:pointer" class="btn-seleciona" title="Clique aqui para editar o registro" data-modal="' + nomeModal + '"' + '>';
    return coluna;
}

//Função para listar e armazenar em array os nomes das classes das colunas da respectiva tabela
//A função recupera as classes que estão nas tags 'th' da respectiva tabela
function listaColunasTabela(tabela) {
    var arrColunas = [];

    //Iteração na tag 'th' para empilhar os nomes das classes
    $('#' + tabela + ' > thead th').each(function () {
        arrColunas.push($(this).attr('class'));
    });

    //Retornando o array com as classes das colunas
    return arrColunas;
}

//Função move para ultima pagina da paginação
function moveLast(nomeModal) {
    paginaAtual = Math.floor(dadosJson.length / $("#cbo-qtde-registros").val());
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
}

//Função move para próxima pagina da paginação
function moveNext(nomeModal) {
    if (paginaAtual < dadosJson.length / $("#cbo-qtde-registros").val() - 1) {
        paginaAtual++;
        montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }
}

//Função move para pagina anterior da paginação
function movePrevious(nomeModal) {
    if (paginaAtual > 0) {
        paginaAtual--;
        montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
    }
}

//Função move para primeira página da paginação
function moveFirst(nomeModal) {
    paginaAtual = 0;
    montaTabela(dadosJson, nomeTabela, paginaAtual, $("#cbo-qtde-registros").val(), nomeModal);
}

//Função para habilitar ou desabilitar os botoes de navegação da paginação
function ajustarBotoes(pagina, qtde, dados) {
    $('#btn-next').prop('disabled', dados.length <= qtde || pagina >= dados.length / qtde - 1);
    $('#btn-previous').prop('disabled', dados.length <= qtde || pagina == 0);
    $('#btn-last').prop('disabled', dados.length <= qtde || pagina >= dados.length / qtde - 1);
    $('#btn-first').prop('disabled', dados.length <= qtde || pagina == 0);
}
    
asked by anonymous 18.11.2017 / 17:23

1 answer

1

Global variables should be avoided as you mentioned. Because they may be colliding with other global names, and because they can be manipulated by someone else's code.

But often we need accessible variables in different places where it is not possible to have a data flow between pure functions. In these cases the solution may be to make a class, or create a closed scope.

In your case creating a closed scope solves the problem with fewer changes.

Just put a IIFE around the code you already have, and declare the variable in there. And you should declare with var , let or const and not only nomeDaVariavel = [] .

The code looks like this: 

(function(){
    var dadosJson = [];
    var paginaAtual = 0;

    // o resto do código aqui dentro

})();
    
18.11.2017 / 19:42
NullPointerException in connection with database Change the class name with jQuery