2
I have a list of inputs with type checkbox, with values that are loaded from a JSON file. I wanted to know how to make a filter, so that when clicking on a certain checkbox, the products (which are loaded from another JSON file) were filtered, leaving only the one with the size chosen in the checkbox.
Unico 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 list HTML, 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 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);
}};
You can give an example of JSON and HTML?
– Sergio
What is the relation of colors to JSON? is in numerical order?
– Sergio
Yes, each color received an id within JSON.
– Vitor Hugo
And the inputs of the form are generated in a way that always respects that order? The
Todos
is what number?– Sergio
Yes, they always respect this, order, "All" is 0, as well as the number of its position within the JSON generated array
– Vitor Hugo
Can you put the code that generates these inputs? I want to give an answer and so I have all the data :)
– Sergio