Filter with JQuery, Json and Input

Question

Filter with JQuery, Json and Input

Navigation

#1 by (1 votes)
#2 by (-1 votes)

2

I have a list of inputs with type checkbox, with values that are loaded from a JSON file. I would like to know how to make a filter, so that by clicking on a particular checkbox, the products (which are loaded from another JSON file) are filtered, leaving only the one that has the size chosen in the checkbox.

The only framework I'm using is 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"
},

And the HTML of the product generated by 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>

And the HTML of the list, only the form is filled by 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 to generate the 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);
}};

javascript html jquery json

asked by anonymous 19.04.2017 / 08:10

2 answers

Error while validating with Regex How to display data from a query in Modal?

score 1 · Answer 1

Well, I'm going to give a generic example here with a JSON pretty much the way you want it.

In jQuery, there is a function called grep (same as linux) that serves to filter arrays, since a JSON is an object notation, you should have a structure something like this:

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

That would translate to an array of objects.

Then you could do something like this:

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

Or by using filter as this link .

Take a look at the grep documentation and a filter of jQuery to get a better idea.

score -1 · Answer 2

Take a look at this lib

link

With it you will be able to set up a responsive table and have sort and field search options. You can make the necessary filters. I have used it and recommend it for simplicity.

You just need to create an html from the table. It is essential to have thead tags. It is not necessary to create what will be created when json is consumed.

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

It is also important to add the library css

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

Then you just need to start the library.

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

For the example I used this 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"
  }]
}

See working at link