JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="checkbox" name="estrelas" value="5">5 Estrelas<br>
<input type="checkbox" name="estrelas" value="4">4 Estrelas<br>
<input type="checkbox" name="estrelas" value="3">3 Estrelas<br>
<input type="checkbox" name="estrelas" value="2">2 Estrelas<br>
<input type="checkbox" name="estrelas" value="1">1 Estrela<br>
<input type="checkbox" name="estrelas" value="0">0 Estrela<br>
<div id="resultado"></div>
JavaScript
var json = {
"tpAmbiente": null,
"hotelPesquisa": [
{
"dtEntrada": "20170510",
"dtSaida": "20170511",
"hotel": {
"id": 94,
"nome": "Itamarati",
"qtEstrela":5.0
},
"quarto": []
}, {
"dtEntrada": "20170510",
"dtSaida": "20170511",
"hotel": {
"id": 95,
"nome": "copacabana",
"qtEstrela":3.0
},
"quarto": []
}, {
"dtEntrada": "20170510",
"dtSaida": "20170511",
"hotel": {
"id": 96,
"nome": "Itamarati",
"qtEstrela":4.0
},
"quarto": []
}, {
"dtEntrada": "20170510",
"dtSaida": "20170511",
"hotel": {
"id": 96,
"nome": "Litoral Hotel",
"qtEstrela":1.0
},
"quarto": []
}, {
"dtEntrada": "20170510",
"dtSaida": "20170511",
"hotel": {
"id": 96,
"nome": "Teste",
"qtEstrela":0.0
},
"quarto": []
}]
};
var hotels = [];
function filtro(valor, selecionado) {
if (selecionado) {
Array.prototype.push.apply(hotels, json.hotelPesquisa.filter(function(hotel) {
return hotel.hotel.qtEstrela == valor;
return hotel.quarto[0].quartoUh.length > 0;
}));
} else {
hotels = hotels.filter(function(hotel) {
return hotel.hotel.qtEstrela != valor;
return hotel.quarto[0].quartoUh.length > 0;
});
}
$("#resultado").html(JSON.stringify(hotels));
}
$("input[name='estrelas']").on('change', function(){
var value = $(this).val();
filtro(value, this.checked);
});