Usando .sort em Objeto Literal

Front-end
#1

Para não precisar ficar replicando o mesmo codigo em varios arquivos e até em mais de um lugar do mesmo arquivo eu transformei a minha função que renderizava produtos no obj literal abaixo.

    produtoObj = function() {
    return {
        titulo: response.produto[i].dados.nome,
        preco: parseFloat(response.produto[i].dados.por),
        parcela: parseFloat(response.produto[i].dados.qtdParcela),
        valorParcela: parseFloat(response.produto[i].dados.por) / parseFloat(response.produto[0].dados.qtdParcela).toFixed(2),
        classe : response.produto[i].dados.id,
        imagem : produtos[i].dados.imgNome,
        renderiza: function () {
            var tagFig = "<piicture>" + "</piicture>";
            var tagPicture = $(tagFig).attr("class", "produtos-organizados a" + this.classe);
            var tagTituloProduto = "<figcaption>" + this.titulo + "</figcaption>";
            var tagPreco = "<p>" + "R$ " + this.preco + "</p>";
            var parcela = this.parcela;
            var converteTotal = this.valorParcela;
            var tagParcela = "<p>" + "at\u00e9 " + this.parcela + "x" + " de " + converteTotal + "</p>";
            var tagDiv = "<div>" + "</div>";
            var divP = $(tagDiv).append(tagPreco, tagParcela);

            var btnId = "<i class='large material-icons' id='response.produto[0].dados.id'>" + "shopping_cart" + "</i>";

            var test = "<img src='img/produtos/" + this.imagem + ".jpg' />";

            var teste = $('.produtos');

            var add1 = $(tagPicture).append(test, tagTituloProduto, divP, btnId);
            var add2 = $(teste).append(add1);

        }
    };
};

Mas depois que fiz isso comecei a ter problemas ao tanto ao tentar carregar mais produtos, quanto para utilizar o “.sort” em uma outra parte do codigo, e ao invés de renderizar os produtos normalmente ao chamar carregar mais produtos, e chamar o renderizaData, renderizaMaiorPreco ou renderizaMenorPreco (as funções que recebem o “.sort”) sempre é chamado os mesmos valores do meu json.

   $(".add-produtos").on("click", function(){
    for(var i = 7; i < 9; i++) {
        var testar = produtoObj();
        testar.renderiza();
    };
    $('.carregar').removeClass("add-produtos"); //tentativa de limitar o numero de vezes que é possivel chamar a função de adicionar os produtos.
});

Acima o codigo que carrega mais produtos, e abaixo a que reorganiza os produtos

    function ordenarData() {
$("#mais-recente").on("click", function(){
    remover();
    renderizaProdutoPorData();
});

function renderizaProdutoPorData(){
    var response = JSON.parse(produto.responseText);
    var produtos = response.produto;
    produtos.sort(compareData);

    for(var i = 0; i < 6; i++) {
        var testar = produtoObj();
        testar.renderiza();
    }


    $(".carregar").on("click", function(){
        for(var i = 7; i< 10; i++) {
            var testar = produtoObj();
            testar.renderiza();
        };
    })
}

function remover(){
    $(".produtos-organizados").remove();
};
};
    function compareData(a, b) {
return (a.dados.data) < (b.dados.data);
}