What is the best way to write the following jQuery / JavaScript code?

Question

What is the best way to write the following jQuery / JavaScript code?

Navigation

#1 by (2 votes)

0

I have the following code snippet which, basically, through a jQuery ( $.ajax() ) request, uses selectors to fetch elements from a page (with content) and places inside elements of the current page using selectors of this.

$.ajax({
    url: '/system/json/study/radar/uf-panorama-brasil.php?estado=' + this.sigla,
    success: function (data) {
        //retorna a tabela de #id natureza
        var natureza = $(data).filter("#natureza");
        $("#uf-natureza").html(natureza);

        //retorna a tabela de #id segmento
        var macrossegmento = $(data).filter("#macro");
        $("#uf-macro").html(macrossegmento);

        //retorna tabela de #id federal
        var federal = $(data).filter("#federal");
        $("#uf-programa-federal").html(federal);

        //retorna tabela de #id estadual
        var estadual = $(data).filter("#estadual");
        $("#uf-programa-estadual").html(estadual);

        //retorna tabela de #id municipal
        var municipal = $(data).filter("#municipal");
        $("#uf-programa-municipal").html(municipal);
    }
});

Everything works perfectly. My question is this: is there any more elegant way to write this snippet of code? Because in the part that returns the result the code snippets are repeating themselves.

javascript jquery

asked by anonymous 30.01.2016 / 19:34

1 answer

Doing price calculation with jQuery within PHP loop How to select several?

score 2 · Accepted Answer

There is not much to move, it's fine - well readable - but in personal opinion I do not like to be using variables, it spends some sort of memory. I would do so:

$.ajax({
    url: '/system/json/study/radar/uf-panorama-brasil.php?estado=' + this.sigla,
    success: function(data) {
        //retorna a tabela de #id natureza
        $("#uf-natureza").html( $(data).filter("#natureza") );

        //retorna a tabela de #id segmento
        $("#uf-macro").html( $(data).filter("#macro") );

        //retorna tabela de #id federal
        $("#uf-programa-federal").html( $(data).filter("#federal") );

        //retorna tabela de #id estadual
        $("#uf-programa-estadual").html( $(data).filter("#estadual") );

        //retorna tabela de #id municipal
        $("#uf-programa-municipal").html( $(data).filter("#municipal") );
    }
});

Or to leave cleaner could do a function (I think it would work):

function tabela (dado, elemento, filtro) {
    $(elemento).html( $(dado).filter(filtro) );
}

$.ajax({
    url: '/system/json/study/radar/uf-panorama-brasil.php?estado=' + this.sigla,
    success: function (data) {
        //retorna a tabela de #id natureza
        tabela(data, "#uf-natureza", "#natureza");

        //retorna a tabela de #id segmento
        tabela(data, "#uf-macro", "#macro");

        //retorna tabela de #id federal
        tabela(data, "#uf-programa-federal", "#federal");

        //retorna tabela de #id estadual
        tabela(data, "#uf-programa-estadual", "#estadual");

        //retorna tabela de #id municipal
        tabela(data, "#uf-programa-municipal", "#municipal");
    }
});