Good morning. I have the following code, my objective is to show only the cards that have registration on the requested date, I am trying to do with Jquery filters but I have not achieved it, I do not know what I am doing wrong. I would appreciate very much to help me.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<title>Control ingreso | Informes</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="./css/dashboard.css">
</head>
<body>
<form id="mendata" action="simulacion.json">
<div class="datepick">
<div class="container">
<div class="col-md-5">
<label>Desde:</label>
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" id="date_since"
placeholder="yyyy-mm-dd" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-5">
<label>Hasta:</label>
<div class="form-group">
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="date_until"
placeholder="yyyy-mm-dd" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!--movement/hours-->
<div class="button">
<button class="btn btn-primary" type="submit">Mostrar Registros</button>
</div>
</div>
</form>
<div id="container" class="container">
<div class="hourcollaborate row">
<div class="hourmen">
<span>42:15:36</span>
</div>
<div class="collaborator">
<span>156</span>
</div>
</div>
</div>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/bootstrap-datetimepicker.min.js"></script>
<script src="./js/dashboard.js"></script>
</body>
</html>
JAVASCRIPT
$(document).ready(function($) {
var token = localStorage.getItem('token');
$(function () {//funcion para mostra el calendario
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: 'yyyy-mm-dd',
autoclose: true,
todayBtn: true
});
$('#datetimepicker2').datetimepicker({
useCurrent: false,
format: 'yyyy-mm-dd',
autoclose: true,
todayBtn: true
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
$('#mendata').on('submit', function(event) {//evento del botón
event.preventDefault();
$('.hourmen').css('display','block');
$('.collaborator').css('display','block');
var url = $(this).attr('action');
var payload = $(this).serialize();
$.ajax({
url: url,
type: 'GET',
beforeSend: function(request) {
request.setRequestHeader("Authorization", 'Bearer '+ token);
},
dataType: 'json',
data: payload,
headers: {
Authorization : 'Bearer ' + token,
},
})
.done(function(response) {
showRegister(response.data.list);
showHours(response.data.hours);
localStorage.setItem("token", response.token);
})
.fail(function(response) {
console.log(response);
})
.always(function(response) {
console.log("complete");
});
});
function showRegister(regis){
//***********************--------------------*******************
var since = $("#date_since").val();
var until = $("#date_until").val();
console.log(since);
console.log(until);
//***************---------------------***********-----------
var html ="";
for (var cc in regis) {
//console.log(Object.keys(regis).length);//este me muestra cuantos trabajadores se registraron
var cDate = Object.keys(regis[cc]).length;//este es para imprimir cuantos registros tiene la fecha
//console.log(Object.keys(regis[cc]).length);
if (regis.hasOwnProperty(cc)) {
html += "<div class='panel panel-primary'>"+
"<div class='cc panel-heading'><a class='principal' href=#"+cc+" data-toggle='collapse'>"+cc+
"</a><span class='badge'>"+cDate+"</span></div>";
html += "<div class=' panel-body collapse' id="+cc+">"
var i=0;//document.getElementById
for (var date in regis[cc]) {
if(date == since){
var cReg = Object.keys(regis[cc][date]).length;
if (regis[cc].hasOwnProperty(date)) {
html += "<div class='panel panel-default'>"+
"<div class='panel-heading'><a href=#"+cc+"-"+i+" data-toggle='collapse'>"+date+
"</a><span class='badge'>"+cReg+"</span></div>";
html += "<div class='panel-body collapse' id="+cc+"-"+i+" >hours";
//console.log();
for (var hour in regis[cc][date]) {
if (regis[cc][date].hasOwnProperty(hour)) {
html += "<div>"+ regis[cc][date][hour] +"</div>"
}
}
}
html += "</div>";
html += "</div>";
i++;
}else {
console.log("la fecha no coincide");
var hola = $('a:not(.principal)');
console.log(hola);
}
}
}
html += "</div>";
html += "</div>";
}
$('#container').append(html);
var collab = $(".collaborator > span");
collab.html(showCollaborator());
function showCollaborator(){
var showcollab = 'Con ' + Object.keys(regis).length + ' trabajadores';
return showcollab;
}
}
function showHours(hwork){
for(var hours in hwork){
if(hwork.hasOwnProperty(hours)){
var man = $(".hourmen");
var hourman = 'Horas trabajadas: ' + hwork;
man.find('span').html(hourman);
}
}
}
});
AND THE ARCHIVE. JSON from where I'm taking the information.
{
"data": {
"list": {
"21082275": {
"2017-12-08": [
"06:59:15"
],
"2017-12-09": [
"06:58:12"
],
"2017-12-11": [
"07:00:29"
]
},
"23324219": {
"2017-12-11": [
"06:59:59"
]
},
"23754991": {
"2017-12-08": [
"06:55:56",
"12:14:14"
],
"2017-12-09": [
"06:55:50"
],
"2017-12-11": [
"06:59:21"
]
},
"30024949": {
"2017-12-08": [
"06:55:26",
"12:06:54"
],
"2017-12-09": [
"06:53:52"
],
"2017-12-11": [
"06:59:30"
]
},
"35353782": {
"2017-12-09": [
"06:58:36"
],
"2017-12-11": [
"07:01:16"
]
},
"35520368": {
"2017-12-09": [
"05:26:55"
],
"2017-12-11": [
"05:20:03"
]
},
"35522500": {
"2017-12-08": [
"07:01:55"
],
"2017-12-09": [
"06:59:23"
]
},
"35523585": {
"2017-12-08": [
"06:57:32"
],
"2017-12-11": [
"06:59:29"
]
},
"35523859": {
"2017-12-08": [
"06:57:51",
"12:17:10"
],
"2017-12-09": [
"06:57:24",
"10:25:43"
],
"2017-12-11": [
"07:01:04"
]
},
"35523891": {
"2017-12-09": [
"06:58:33"
]
},
"35528549": {
"2017-12-09": [
"06:55:29"
]
},
"35531440": {
"2017-12-08": [
"06:54:58",
"12:11:11"
],
"2017-12-09": [
"06:55:21"
],
"2017-12-11": [
"06:49:07"
]
},
"35533796": {
"2017-12-09": [
"05:44:01"
],
"2017-12-11": [
"05:31:44"
]
},
"35534856": {
"2017-12-08": [
"07:02:30"
],
"2017-12-09": [
"06:58:43"
],
"2017-12-11": [
"07:01:21"
]
},
"35535064": {
"2017-12-11": [
"05:32:00"
]
},
"35535775": {
"2017-12-09": [
"06:58:50"
],
"2017-12-11": [
"07:00:54"
]
},
"35537255": {
"2017-12-08": [
"06:58:23"
],
"2017-12-09": [
"06:59:28"
],
"2017-12-11": [
"06:48:45"
]
},
"39808868": {
"2017-12-09": [
"06:52:05"
],
"2017-12-11": [
"07:01:09"
]
},
"43091716": {
"2017-12-11": [
"06:58:36"
]
},
"52034557": {
"2017-12-08": [
"06:57:03"
],
"2017-12-09": [
"06:55:05"
]
},
"52655088": {
"2017-12-08": [
"06:54:18",
"12:12:18"
],
"2017-12-09": [
"06:55:11"
],
"2017-12-11": [
"06:54:47"
]
},
"52734919": {
"2017-12-08": [
"07:03:01"
],
"2017-12-11": [
"06:59:45"
]
},
"60259495": {
"2017-12-08": [
"06:51:24"
],
"2017-12-11": [
"06:59:04"
]
},
"79126231": {
"2017-12-08": [
"05:43:46",
"12:16:38"
],
"2017-12-09": [
"05:24:03"
],
"2017-12-11": [
"05:20:22"
]
},
"79966318": {
"2017-12-11": [
"07:22:48"
]
},
"80656001": {
"2017-12-11": [
"06:49:19"
]
},
"1070944702": {
"2017-12-08": [
"06:54:42"
],
"2017-12-09": [
"06:54:08"
],
"2017-12-11": [
"06:48:59"
]
},
"1070952820": {
"2017-12-11": [
"07:01:02"
]
},
"1070957262": {
"2017-12-09": [
"06:53:56"
],
"2017-12-11": [
"06:59:15"
]
},
"1070963126": {
"2017-12-09": [
"11:36:34"
]
},
"1072592064": {
"2017-12-08": [
"06:46:51",
"12:12:29"
]
},
"1079262385": {
"2017-12-08": [
"06:54:06",
"07:24:20"
],
"2017-12-09": [
"06:54:30"
]
},
"1087958411": {
"2017-12-11": [
"06:59:32"
]
}
},
"hours": "29:20:21"
},
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE1MTI5OTkxODAsImV4cCI6MTUxMjk5OTc4MCwidHlwZSI6ImltcGxpY2l0In0.jl3cjTTnzTbQhRKj8VRtgaJpLbl9U4pLJGND9ERwr1g"
}