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

Question

I have the following code snippet which basically via a request jQuery ($.ajax()), uses selectors to search for elements of a page (with content) and places within elements of the current page using selectors of this page.

$.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.

Answer 1

There’s not much to work with, it’s good - very readable - but in my personal opinion I don’t like to keep using variables, I spend a lot 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 make it cleaner I 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");
    }
});