I have 2 problems with this code, 1st one is that for the user Edgar Francisco Williams Britez is showing the wrong values for monday, wednesday and friday like this
Mon Tue Wed Thu Fri Sat Sun
10 0 0
It should display like this
Mon Tue Wed Thu Fri Sat Sun
0
values for user FREDY RAMON BAEZ OCAMPOS are displaying correctly but then it should sum the total of each user per day but is not doing that correctly.
The Total it displays like this
Mon Tue Wed Thu Fri Sat Sun
10 0 0
expected result:
Mon Tue Wed Thu Fri Sat Sun
10 2 0
So that at the end the table it's supposed to look like this:
User Mon Tue Wed Thu Fri Sat Sun
FREDY RAMON BAEZ OCAMPOS 10 2 0
Edgar Francisco Williams Britez 0
Totals 10 2 0
I don't know what I'm doing wrong to be honest, if anyone can give me some help
const myObj = {
"data": {
"1660": {
"3": {
"1": {
"RC": 10,
"time": "Entrada: 07:40:26\nSalida: 17:18:45\n",
"distance": "Entrada: 45 mts\nSalida: 41 mts\n",
"RCNP": 10,
"RCP": 0,
"status": "5"
},
"3": {
"RC": 2,
"time": "Entrada: 07:46:17\n",
"distance": "Entrada: 44 mts\n",
"RCNP": 1,
"RCP": 1,
"status": "1"
},
"5": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0,
"status": "0"
}
},
"total": {
"1": {
"RC": 10,
"time": "",
"distance": "",
"RCNP": 10,
"RCP": 0
},
"3": {
"RC": 2,
"time": "",
"distance": "",
"RCNP": 1,
"RCP": 1
},
"5": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0
}
}
},
"1941": {
"3": {
"3": {
"RC": 0,
"time": "Entrada: 16:19:15\nSalida: 16:19:17\n",
"distance": "Entrada: 6602879 mts\nSalida: 6602879 mts\n",
"RCNP": 0,
"RCP": 0,
"status": "5"
}
},
"total": {
"3": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0
}
}
}
},
"error": false,
"userData": {
"1660": "FREDY RAMON BAEZ OCAMPOS",
"1941": "Edgar Francisco Williams Britez"
}
}
loadResumeForAuditor(myObj);
function loadResumeForAuditor(resultMap) {
let tableResume = document.getElementById("tableResume"); //id de la tabla
let trResume = document.getElementById('trResume'); //id del tr
let trCloned;
let footer = document.getElementById("tfootContainer"); //id tfoot totales
var eventTypeSelect = jQuery('input[name="customRadio"]:checked').attr("id");
//console.log(resultMap.data);
for (const [userId, weekValue] of Object.entries(resultMap.data)) {
trCloned = trResume.cloneNode(true);
document.getElementsByClassName("group-auditor")[0].innerText = resultMap.userData[userId];
document.getElementsByClassName('tBodyContainer')[0].appendChild(trCloned);
for (const [key, summaryData] of Object.entries(weekValue)) {
if (key == "total") {
for (const [dayOfWeek, totalValue] of Object.entries(summaryData)) {
document.getElementsByClassName("total-day-" dayOfWeek)[0].innerText = totalValue[eventTypeSelect];
//console.log(totalValue[eventTypeSelect]);
}
} else {
for (const [dayOfWeek, resumeValue] of Object.entries(summaryData)) {
let tdColor = jQuery("#legendTable td[id='" resumeValue["status"] "']").attr("class");
document.getElementsByClassName("resume-day-" dayOfWeek)[0].innerText = resumeValue[eventTypeSelect];
//console.log(resumeValue[eventTypeSelect]);
jQuery(document.getElementsByClassName("resume-day-" dayOfWeek)[0]).parent('td').attr('class', tdColor);
document.getElementsByClassName('tBodyContainer')[0].appendChild(trCloned);
}
}
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<div >
<input type="radio" id="RC" name="customRadio" checked="">
<label for="RC">Cantidad de Romaneos</label>
</div>
<div >
<input type="radio" id="distance" name="customRadio" >
<label for="distance">Distancia Entrada / Salida</label>
</div>
<div >
<input type="radio" id="time" name="customRadio" >
<label for="time">Horario Entrada / Salida</label>
</div>
<div >
<input type="radio" id="RCP" name="customRadio" >
<label for="RCP">Fiscalización Presencial</label>
</div>
<div >
<input type="radio" id="RCNP" name="customRadio" >
<label for="RCNP">Fiscalización No Presencial</label>
</div>
</div>
<table id="tableResume" >
<thead style="width:100%">
<th>User</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</thead>
<tbody >
<tr id="trResume">
<td><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
<td ><span ></span></td>
</tr>
</tbody>
<tfoot id="tfootContainer">
<th>Totals</th>
<th><span ></span></th>
<th><span ></span></th>
<th><span ></span></th>
<th><span ></span></th>
<th><span ></span></th>
<th><span ></span></th>
<th><span ></span></th>
</tfoot>
</table>CodePudding user response：
IMHO What you are doing wrong is mixing the data processing with the presentation. Those are separate concerns
IOW: always write test cases of your data processing first, then worry about presentation later. TDD is an awesome discipline to make sure you get what you want long before your project is put into production.
This is a test that I wrote using your object as base.
The result I got using console.log( report ) was:
[
{
name: 'FREDY RAMON BAEZ OCAMPOS',
days: { '1': 10, '3': 2, '5': 0 }
},
{ name: 'Edgar Francisco Williams Britez', days: { '3': 0 } }
]
and the console.log( totals )
{ '1': 10, '3': 2, '5': 0 }
test code:
class SO_Test extends Test {
test_1(){
const obj = {
"data": {
"1660": {
"3": {
"1": {
"RC": 10,
"time": "Entrada: 07:40:26\nSalida: 17:18:45\n",
"distance": "Entrada: 45 mts\nSalida: 41 mts\n",
"RCNP": 10,
"RCP": 0,
"status": "5"
},
"3": {
"RC": 2,
"time": "Entrada: 07:46:17\n",
"distance": "Entrada: 44 mts\n",
"RCNP": 1,
"RCP": 1,
"status": "1"
},
"5": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0,
"status": "0"
}
},
"total": {
"1": {
"RC": 10,
"time": "",
"distance": "",
"RCNP": 10,
"RCP": 0
},
"3": {
"RC": 2,
"time": "",
"distance": "",
"RCNP": 1,
"RCP": 1
},
"5": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0
}
}
},
"1941": {
"3": {
"3": {
"RC": 0,
"time": "Entrada: 16:19:15\nSalida: 16:19:17\n",
"distance": "Entrada: 6602879 mts\nSalida: 6602879 mts\n",
"RCNP": 0,
"RCP": 0,
"status": "5"
}
},
"total": {
"3": {
"RC": 0,
"time": "",
"distance": "",
"RCNP": 0,
"RCP": 0
}
}
}
},
"error": false,
"userData": {
"1660": "FREDY RAMON BAEZ OCAMPOS",
"1941": "Edgar Francisco Williams Britez"
}
};
var users = obj.userData;
var id_users = Object.keys( users );
var totals = {};
var report = [];
id_users.forEach( function( id_user ){
let second_level = Object.keys( obj.data[ id_user ] );
let days = {};
second_level.forEach( function( key3 ){
if( key3 === "total" )
return;
var data = obj.data[ id_user ][key3];
var dows = Object.keys( data );
dows.forEach( function( dow ){
if( days[ dow ] === undefined ){
days[ dow ] = 0;
}
if( totals[ dow ] === undefined ){
totals[ dow ] = 0;
}
let num = obj.data[ id_user ][key3][dow]["RC"];
days[ dow ] = num;
totals[ dow ] = num;
})
})
let item_report = {};
item_report.name = users[ id_user ];
item_report.days = days;
report.push( item_report );
})
console.log( report );
console.log( totals );
this.assertTrue( true );
this.done();
}
}