Using . Sort in Literal Object

Question

To avoid replicating the same code in multiple files and even more than one place in the same file, I transformed my function that rendered products in the literal object below:

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);

        }
    };
};

But after I did that I started having problems both trying to load more products and using the .sort in another part of the code, and instead of rendering the products normally when calling load more products, and call the renderizaData, renderizaMaiorPreco or renderizaMenorPreco (the functions receiving the .sort) is always called the same values of my 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.
});

Above the code that carries more products, and below the one that reorganizes the products:

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);
}

Answer 1

Our people I said I was checking my answer, here it is:

var Array1 = [{
    item1: 'A',
    item3: 10
},{
    item1: 'B',
    item3: 19
},{
    item1: 'C',
    item3: 1
}];

var Objeto2 = {
    objeto1 : {
        item1: 'A',
        item3: 19
    },
    objeto2 : {
        item1: 'B',
        item3: 10
    }
};

Array1.sort(function(a,b){
    console.log('ARRAY a: ',a);
  console.log('ARRAY b: ',b);
  return a.item3 - b.item3; //CRESCENTE
  //return b.item3 - a.item3; //DECRESCENTE
});
console.log('sort em array com objetos: ',Array1);

/*
Objeto2.sort(); // isso vai trazer um erro
Objeto2.sort(function(a,b){ //isso vai trazer um erro
    console.log('OBJETO a: ',a);
  console.log('OBJETO b: ',b);
});*/

// Da para fazer isso:
var objKeys = Object.keys(Objeto2).sort(function(a,b){
   return Objeto2[a].item3 - Objeto2[b].item3;
});
console.log(keysObjeto); // AI TENDO AS KEYS DO OBJETO VC MANIPULA COM UM FOR USANDO ESSAS KEYS, OU CRIA UM NOVO OBJETO.

var NovoObjeto = {}; // ou array
for(var idx = 0; idx < keysObjeto.length; idx++){
   NovoObjeto[keysObjeto[idx]] = Objeto2[keysObjeto[idx]];
}

console.log('Objeto2 Antigo: ',Objeto2);
console.log('NovoObjeto: ',NovoObjeto);

I don’t know if you saw the previous answer, but the example of Object.Keys() can be seen on the MDN site : Object.Keys()