Reorder list of products with Javascript?

2

I would like to know how to change a list of products.

I have the products in Json , and I would like to implement a function to reorganize the products by Mais recente, Maior ou Menor preço.

JSON

        "produtoUm" : [
    {
      "dados": {
        "id" : "0",
        "nome": "Bata Bordada",
        "imgNome": "bata-bordada",
        "data": "Sat, 25 Oct 2014 02:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [1,2,3],
        "tipo": 1,
        "cores": [1,2,3,4,5,6,7,8,9,10]
      },
      "pagamento":{
        "de": null,
        "por": 298,
        "qtdParcela": 5
      },
      "link": "img/produtos/bata-bordada.jpg"
    },
    {
      "dados":{
        "id" : "1",
        "nome": "Chapéu de Prata com Fivela",
        "imgNome": "vestido-floral-pequeno",
        "data": "Sun, 11 Oct 2015 03:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [5],
        "tipo": 1,
        "cores": [6]
      },
      "pagamento":{
        "de": null,
        "por": 398,
        "qtdParcela": 3
      },
      "link": "img/produtos/vestido-floral-pequeno.jpg"
    },
    {
      "dados":{
        "id" : "2",
        "nome": "Vestido Texturizado",
        "imgNome": "verstido-texturizado",
        "data": "Sun, 20 Mar 2016 03:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [7, 8, 9],
        "tipo": 1,
        "cores": [6, 3, 2]
      },
      "pagamento":{
        "de": 450,
        "por": 598,
        "qtdParcela": 5
      },
      "link": "img/produtos/verstido-texturizado.jpg"
    },
    {
      "dados":{
        "id" : "3",
        "nome": "Bata Bordada",
        "imgNome": "bata-bordada-floral",
        "data": "Tue, 10 May 2016 03:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [1, 2, 3, 7, 8, 9],
        "tipo": 1,
        "cores": [1, 7, 8]
      },
      "pagamento":{
        "de": null,
        "por": 198,
        "qtdParcela": 8
      },
      "link": "img/produtos/bata-bordada-floral.jpg"
    },
    {
      "dados":{
        "id" : "4",
        "nome": "Chapéu de Praia com Fivela Novo",
        "imgNome": "conjunto-social",
        "data": "Fri, 15 Jan 2016 02:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [1, 2, 3, 7, 8, 9],
        "tipo": 2,
        "cores": [3,4]
      },
      "pagamento":{
        "de": null,
        "por": 98,
        "qtdParcela": 5
      },
      "link": "img/produtos/conjunto-social.jpg"
    },
    {
      "dados":{
        "id" : "5",
        "nome": "Vestido Listrado",
        "imgNome": "vestido-listrado",
        "data": "Wed, 15 Apr 2015 03:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [5],
        "tipo": 1,
        "cores": [7, 3, 2, 4]
      },
      "pagamento":{
        "de": 450,
        "por": 398,
        "qtdParcela": 5
      },
      "link": "img/produtos/vestido-listrado.jpg"
    },
    {
      "dados":{
        "id" : "6",
        "nome": "Vestido Corte Balão",
        "imgNome": "vestido-azul",
        "data": "Mon, 05 Jan 2015 02:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [3, 4, 9, 10, 11],
        "tipo": 1,
        "cores": [2]
      },
      "pagamento":{
        "de": null,
        "por": 410,
        "qtdParcela": 10
      },
      "link": "img/produtos/vestido-azul.jpg"
    },
    {
      "dados":{
        "id" : "7",
        "nome": "Vestido Longo Contemporâneo",
        "imgNome": "vestido-comteporaneo",
        "data": "Sat, 05 Nov 2016 02:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [1, 2, 6, 7],
        "tipo": 0,
        "cores": [6, 5, 10, 3, 7]
      },
      "pagamento":{
        "de": null,
        "por": 398,
        "qtdParcela": 6
      },
      "link": "img/produtos/vestido-comteporaneo.jpg"
    },
    {
      "dados":{
        "id" : "8",
        "nome": "Vestido Branquinho Básico",
        "imgNome": "vestido-branco-basico",
        "data": "Fri, 30 Oct 2015 02:00:00 GMT"
      },
      "caracteristicas":{
        "tamanho": [1, 2, 6, 7],
        "tipo": 1,
        "cores": [3]
      },
      "pagamento":{
        "de": 450,
        "por": 50,
        "qtdParcela": 4
      },
      "link": "img/produtos/vestido-branco-basico.jpg"
    }
  ],

This is the JSON of the products that are rendered when loading the page.

    
asked by anonymous 20.04.2017 / 18:33

1 answer

1

As I explained in this answer to function sort accepts an optional parameter. I imagined a scenario where you would have a select with the options: "Recente", "Maior" e "Menor". Remember enough shopping site, where you have the option to sort a product by Maior preço, Menor Preço e itens mais Populares. p>

See it working.

function ordenar(value) {
    var array = [{
            "dados": {
                "id": "0",
                "nome": "Bata Bordada",
                "imgNome": "bata-bordada",
                "data": "Sat, 25 Oct 2014 02:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [1, 2, 3],
                "tipo": 1,
                "cores": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            },
            "pagamento": {
                "de": null,
                "por": 298,
                "qtdParcela": 5
            },
            "link": "img/produtos/bata-bordada.jpg"
        },
        {
            "dados": {
                "id": "1",
                "nome": "Chapéu de Prata com Fivela",
                "imgNome": "vestido-floral-pequeno",
                "data": "Sun, 11 Oct 2015 03:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [5],
                "tipo": 1,
                "cores": [6]
            },
            "pagamento": {
                "de": null,
                "por": 398,
                "qtdParcela": 3
            },
            "link": "img/produtos/vestido-floral-pequeno.jpg"
        },
        {
            "dados": {
                "id": "2",
                "nome": "Vestido Texturizado",
                "imgNome": "verstido-texturizado",
                "data": "Sun, 20 Mar 2016 03:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [7, 8, 9],
                "tipo": 1,
                "cores": [6, 3, 2]
            },
            "pagamento": {
                "de": 450,
                "por": 598,
                "qtdParcela": 5
            },
            "link": "img/produtos/verstido-texturizado.jpg"
        },
        {
            "dados": {
                "id": "3",
                "nome": "Bata Bordada",
                "imgNome": "bata-bordada-floral",
                "data": "Tue, 10 May 2016 03:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [1, 2, 3, 7, 8, 9],
                "tipo": 1,
                "cores": [1, 7, 8]
            },
            "pagamento": {
                "de": null,
                "por": 198,
                "qtdParcela": 8
            },
            "link": "img/produtos/bata-bordada-floral.jpg"
        },
        {
            "dados": {
                "id": "4",
                "nome": "Chapéu de Praia com Fivela Novo",
                "imgNome": "conjunto-social",
                "data": "Fri, 15 Jan 2016 02:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [1, 2, 3, 7, 8, 9],
                "tipo": 2,
                "cores": [3, 4]
            },
            "pagamento": {
                "de": null,
                "por": 98,
                "qtdParcela": 5
            },
            "link": "img/produtos/conjunto-social.jpg"
        },
        {
            "dados": {
                "id": "5",
                "nome": "Vestido Listrado",
                "imgNome": "vestido-listrado",
                "data": "Wed, 15 Apr 2015 03:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [5],
                "tipo": 1,
                "cores": [7, 3, 2, 4]
            },
            "pagamento": {
                "de": 450,
                "por": 398,
                "qtdParcela": 5
            },
            "link": "img/produtos/vestido-listrado.jpg"
        },
        {
            "dados": {
                "id": "6",
                "nome": "Vestido Corte Balão",
                "imgNome": "vestido-azul",
                "data": "Mon, 05 Jan 2015 02:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [3, 4, 9, 10, 11],
                "tipo": 1,
                "cores": [2]
            },
            "pagamento": {
                "de": null,
                "por": 410,
                "qtdParcela": 10
            },
            "link": "img/produtos/vestido-azul.jpg"
        },
        {
            "dados": {
                "id": "7",
                "nome": "Vestido Longo Contemporâneo",
                "imgNome": "vestido-comteporaneo",
                "data": "Sat, 05 Nov 2016 02:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [1, 2, 6, 7],
                "tipo": 0,
                "cores": [6, 5, 10, 3, 7]
            },
            "pagamento": {
                "de": null,
                "por": 398,
                "qtdParcela": 6
            },
            "link": "img/produtos/vestido-comteporaneo.jpg"
        },
        {
            "dados": {
                "id": "8",
                "nome": "Vestido Branquinho Básico",
                "imgNome": "vestido-branco-basico",
                "data": "Fri, 30 Oct 2015 02:00:00 GMT"
            },
            "caracteristicas": {
                "tamanho": [1, 2, 6, 7],
                "tipo": 1,
                "cores": [3]
            },
            "pagamento": {
                "de": 450,
                "por": 50,
                "qtdParcela": 4
            },
            "link": "img/produtos/vestido-branco-basico.jpg"
        }
    ]

    if (value === 'Recente') {
        console.log(array.sort(compareData));
    } else if (value === 'Maior') {
        console.log(array.sort(compareMaior));
    } else {
        console.log(array.sort(compareMenor));
    }
}

function compareData(a, b) {
    return new Date(a.dados.data) < new Date(b.dados.data);
}

function compareMaior(a, b) {
    return a.pagamento.por < b.pagamento.por;
}

function compareMenor(a, b) {
    return a.pagamento.por > b.pagamento.por;
}
<select onchange="ordenar(this.value)">
<option></option>
<option>Recente</option>
<option>Maior</option>
<option>Menor</option>
</select>
    
20.04.2017 / 19:15