Rearranging product lists with Javascript?

Asked

Viewed 130 times

2

I wanted to know how to change a product list.

I have the products in a Json, and 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.

javascript jquery json

  • Lamppost Json Vitor. Maybe that answer here you may get some idea if I understand your question correctly!

  • Vitor, I posted an answer. Welcome to Stack Overflow, in case you haven’t been through tour, recommend reading to better understand the functioning of the site

  • Thank you Marconi

  • Vitor, that was it?

  • It was. I’m doing a test, and it asks you to have this function, now I just need to adapt to the mobile version too. Thank you very much. And if you are not busy, I would like to ask for help with another question, which I posted in this other question https://answall.com/questions/199575/addto cart with javascript

1 answer

1


As I explained in this reply the function sort accepts an optional parameter. I imagined a scenario where you would have a select with the options: "Recente", "Maior" e "Menor". Remembers enough shopping site, where you have the option of ordain a product per Maior preço, Menor Preço e itens mais Populares.

See 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>

Browser other questions tagged javascript jquery json

You are not signed in. Login or sign up in order to post.