2

Eu tenho uma lista de inputs com type checkbox, com valores que são carregados a partir de um arquivo JSON. Queria saber como fazer um filtro, de forma que ao clicar em um determinado checkbox, os produtos (que são carregados a partir de um outro arquivo JSON) fossem filtrados, ficando apenas o que tem o tamanho escolhido no checkbox.

Unico framework que estou usando é o Jquery

    "produto" : [
{
  "dados": {
    "nome": "Vestido Listrado",
    "imgNome": "vestido-listrado",
    "data": "Ter, 25 Abr 2017 05: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": 198,
    "qtdParcela": 2
  },
  "link": "img/produtos/vestido-listrado.jpg"
},
{
  "dados":{
    "nome": "Chapéu Florido",
    "imgNome": "chapéu-florido",
    "data": "Sun, 23 Oct 2016 12:00:00 GMT"
    },
  "caracteristicas":{
    "tamanho": [5],
    "tipo": 1,
    "cores": [6]
  },
  "pagamento":{
    "de": null,
    "por": 398,
    "qtdParcela": 3
    },
  "link": "img/produtos/chapeu-florido.jpg"
},

E o HTML do produto gerado pelo JS

    <piicture class="produtos-organizados">
    <img src="img/produtos/vestido-florido.jpg" alt="vestido-florido">
    <figcaption>Vestido Florido</figcaption>
    <div>
    <p>R$ 198</p>
    <p>até 2x de 99.00</p>
    </div>
    <i class="large material-icons">shopping_cart</i>
    </piicture>

E o HTML da lista, somente o form é preenchido pelo JS

    <div class="lista-cores">
            <div class="espacado">
                    <button id="btn-cor">Cores</button>
                    <span class="canto canto-cor">+</span>
                    <form class="lista-de-cores oculto fadeOut">
                            <input type="checkbox">Todos<br>
                            <input type="checkbox">Amarelo<br>
                            <input type="checkbox">Azul<br>
                            <input type="checkbox">Branco<br>
                            <input type="checkbox">Cinza<br>
                            <input type="checkbox">Laranja<br>
                            <input type="checkbox">Verde<br>
                            <input type="checkbox">Vermelho<br>
                            <input type="checkbox">Preto<br>
                            <input type="checkbox">Rosa<br>
                            <input type="checkbox">Vinho<br>
                    </form>
            </div>
    </div>

JS para gerar os inputs

    function listaDeCores(){
var response = JSON.parse(produto.responseText);
var cor = response.cores;

for (var i = 0; i < cor.length; i++) {
    var arrayDeCores = response.cores[i].label;

    var listaDeCores = $(".lista-de-cores");
    var inputText = arrayDeCores;
    var inputP = "<p>" + "</p>";
    var idP = response.cores[i].id;
    var inputDeCores = "<input type='checkbox'>" + inputText;
    var srcIdP = $(inputP).attr("class", idP);

    srcIdP.append(inputDeCores);
    listaDeCores.append(srcIdP);
}};
6
  • Podes dar um exemplo do JSON e do HTML?
    – Sergio
    Commented 19/04/2017 às 6:14
  • Qual é a relação das cores com o JSON? é por ordem numérica?
    – Sergio
    Commented 19/04/2017 às 11:58
  • Sim, cada cor recebeu uma id dentro do JSON.
    – Vitor Hugo
    Commented 19/04/2017 às 18:43
  • E os inputs do form são gerados de maneira a sempre respeitarem essa ordem? O Todos é qual numero?
    – Sergio
    Commented 19/04/2017 às 18:48
  • Sim, eles sempre respeitam essa, ordem, o "Todos" é o 0, assim como o numero de sua posição dentro do Array gerado pelo JSON
    – Vitor Hugo
    Commented 19/04/2017 às 18:57

2 Respostas 2

1

Bom, eu vou dar um exemplo genérico aqui com um JSON mais ou menos do jeito que você quer.

No jQuery, existe uma função chamada grep (igual a do linux) que serve para filtrar arrays, uma vez que um JSON é uma notação de objeto, você deverá ter uma estrutura mais ou menos assim:

var produtos = [
  {nome:"produto", tamanho:34, preco:24.99},
  {nome:"produt2", tamanho:37, preco:25.99},
  {nome:"produto3", tamanho:38, preco:29.99},
  {nome:"produto4", tamanho:32, preco:21.99}
];

Que traduziria para um array de objetos.

Então você poderia fazer algo desse tipo:

$(produtos).grep(function(i,produto) { return produto.tamanho == $(seuoption).val(); });

Ou usando filter também como neste link.

Dê uma olhada na documentação do grep e do filter do jQuery para ter uma noção melhor.

-1

De uma olhada nessa lib

https://datatables.net/

Com ela você será capaz de montar uma tabela responsiva e terá opções de ordenação e busca por campos. Poderá fazer os filtros necessários. Já usei e recomendo pela simplicidade.

Você precisa apenas criar um html da tabela. É essencial que se tenha as tags thead. Não é necessario criar o ele sera criado quando o json for consumido.

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

    </table>

Também é importante que seja adicionado o css da biblioteca

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">

Depois basta que você inicie a biblioteca.

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "file.json",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

Para o exemplo utilizei este json

{"data": [{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
  },
  {
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
  },
  {
  "name": "Ashton Cox",
  "position": "Junior Technical Author",
  "salary": "$86,000",
  "start_date": "2009/01/12",
  "office": "San Francisco",
  "extn": "1562"
  },
  {
  "name": "Cedric Kelly",
  "position": "Senior Javascript Developer",
  "salary": "$433,060",
  "start_date": "2012/03/29",
  "office": "Edinburgh",
  "extn": "6224"
  },
  {
  "name": "Airi Satou",
  "position": "Accountant",
  "salary": "$162,700",
  "start_date": "2008/11/28",
  "office": "Tokyo",
  "extn": "5407"
  }]
}

Veja funcionando em https://jsfiddle.net/oaqcybdg/1/

2
  • Mauricio, os links quebram, se possível poste o exemplo aqui. A ideia do site é termos o conteúdo por aqui.
    – Marconi
    Commented 20/04/2017 às 18:24
  • Fiz a edição com um exemplo de utilização da biblioteca. Quando for sugerir uma lib qual a melhor forma de fazer isso ? Ainda tenho dificuldade de fazer respostas deste tipo. Commented 20/04/2017 às 19:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .