0
134
ViewsHow to iterate on multiple list of objects in jQuery to do a calculation
Context: CMPT stands for compte which is Account in english, the application can have multiple accounts which contains an hospitalisation field and for each hospitalisation fields present in ONE account, i want to be able to calculate the total cost for each hospitalisations.
Currently i am able to calculate the field total(mntTotHosp) which is obtained by doing the calculation of the field Tarif quotidien ( TariQuoti) * Nombre de jours (NbJrsHosp) . In english : Daily price * numbers of days.
But this works only for the first Hospitalisation (ListeHospitalisation[0].mntTotHosp) by doing this :
function CalculMntTotHosp() {
var tariQuoti = $("input[id$='TariQuoti']").val().replace(",", ".") || 0;
var nbJrsHosp = $("input[id$='NbJrsHosp']").val().replace(",", ".") || 0;
var mntTotHosp = tariQuoti * nbJrsHosp
$("input[id$='MntTotHosp']").val(mntTotHosp.toFixed(2).replace(".", ","));
}
My problem :
I would like to do this for each CmptETS in the list ListeCmptETS and each Hospitalisation contained in ListeHospitalisation which is contained in ListeCmptETS. Currently it's only able to calculate the total for the first hospitalisation present in the first account.
Here's a screenshot of the 3 fields used to do the calculation, to have a better understanding of the data:
Sorry the text is in french in the app but here's a visual representation to see the data :
Hopefully this was enough clear could anyone help ? Thanks a lot :)
1 answers
Answer question0
It was a bit hard to know what to suggest without seeing more code, but maybe this vanilla-flavored example can get you started:
const list = Array.from(document.querySelectorAll(".listeCmptETS"));
Array.from(list).forEach((listeCmptETS) => {
const
hospSection = listeCmptETS.querySelector(".listeHosp"),
listeHospitalisation = Array.from(hospSection.querySelectorAll(".stay"));
listeHospitalisation.forEach((thisStay) => {
CalculMntTotHosp(thisStay);
});
});
function CalculMntTotHosp(stay) {
const
toNum = (str) => +(str.replace(',', '.') || 0),
toCurrency = (num) => num.toFixed(2).replace('.', ','),
tariQuoti = toNum( stay.querySelector('.TariQuoti').value ),
nbJrsHosp = toNum( stay.querySelector('.NbJrsHosp').value ),
output = toCurrency(tariQuoti * nbJrsHosp);
//console.log(`daily: ${tariQuoti}`, `days: ${nbJrsHosp}`);
stay.querySelector('.MntTotHosp').value = output;
}.listeCmptETS { margin-bottom: 1rem; }
.section { width: 20rem; min-height: 2.5rem; padding-top: 0.4rem; border: 1px solid grey; }
.listeHosp {border-top: none; }
.stay { position: relative; padding: 0.3rem; }
.stay div { margin-bottom: 0.3rem; }
.stay input {display: inline-block; position: absolute; left: 3rem; } <div class="listeCmptETS">
<div class="section">(non-hospitalization content goes here)</div>
<div class="listeHosp section">
<div class="stay">
<div>Daily<input class="TariQuoti" value="21,00" /></div>
<div>Days<input class="NbJrsHosp" value="2" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
<div class="stay">
<div>Daily<input class="TariQuoti" value="22,00" /></div>
<div>Days<input class="NbJrsHosp" value="" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
</div>
</div>
<div class="listeCmptETS">
<div class="section">(non-hospitalization content goes here)</div>
<div class="listeHosp section">
<div class="stay">
<div>Daily<input class="TariQuoti" value="23,00" /></div>
<div>Days<input class="NbJrsHosp" value="1" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
<div class="stay">
<div>Daily<input class="TariQuoti" value="24,00" /></div>
<div>Days<input class="NbJrsHosp" value="3" /></div>
<div>Tot<input class="MntTotHosp" /></div>
</div>
</div>
</div>