1

Tenho 2 funções: A função1 retorna um JSON via AJAX e lista os dados em uma tabela HTML dinamicamente, até ai tudo funcionando. A função2 precisa manipular os mesmos dados, porém, eu não queria fazer outra requisição AJAX invocando a função1 novamente e tendo em vista que os dados já estão no lado do cliente. Atualmente estou usando uma variável global que armazena o retorno do AJAX, assim utilizo-a em outras funções, mas sei que variável global não é uma boa prática. É possível armazenar os dados do retorno do AJAX em uma variável sem ser global e utilizar a mesma em outras funções?

Código da função 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;
}

Código da função 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);
}

10
  • Qual é a função 2? é montaTabela? onde usas dadosJson?
    – Sergio
    Commented 18/11/2017 às 16:47
  • Sergio. Inseri a função 2 agora. Estou usando a variável global que setei no success da requisição AJAX, essa que eu gostaria de eliminar.
    – RDamazio
    Commented 18/11/2017 às 16:51
  • São somente essas duas que usam dadosJson?
    – Sergio
    Commented 18/11/2017 às 16:52
  • Não, existem outras funções que utilizam os dadosJson também.Porém, se eu conseguir recuperar o valor do AJAX nesta função, as demais receberão os dados como parametro.
    – RDamazio
    Commented 18/11/2017 às 16:54
  • Então é melhor colocares o código completo, para termos uma ideia melhor. São ficheiros diferentes ou o código está todo num só ficheiro?
    – Sergio
    Commented 18/11/2017 às 16:55

1 Resposta 1

1

Variáveis globais devem ser evitadas como referiste. Porque podem ser colidir com outros nomes globais, e porque podem ser manipuladas por código alheio.

Mas muitas vezes precisamos de variáveis acessíveis em sítios diferentes onde não é possível ter um fluxo de dados entre funções puras. Nesses casos a solução pode ser fazer uma classe, ou criar um escopo fechado.

No teu caso criando um escopo fechado resolve o problema com menos mudanças.

Basta colocares uma IIFE à volta do código que já tens, e declarar a variável lá dentro. E deves declarar com var, let ou const e não somente nomeDaVariavel = [].

O código ficaria assim:

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

    // o resto do código aqui dentro

})();
2
  • Sergio, obrigado pela sugestão. Pesquisei sobre IIFE e até entendi o conceito de encapsular as variáveis em tal função. O que não consegui entender e nem implementar, é como acessar essas variáveis posteriormente? Por que se eu declarar dessa maneira, outras funções não visualizam tais variáveis...
    – RDamazio
    Commented 19/11/2017 às 20:09
  • @RDamazio a ideia é teres essa IIFE à volta do código todo. Como se fosse uma global, dentro da IIFE. Ou seja, todo o código que precisa aceder a essas variáveis é declarado dentro da IIFE.
    – Sergio
    Commented 19/11/2017 às 20:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .