0
141
VistasCómo iterar en múltiples listas de objetos en jQuery para hacer un cálculo
Contexto : CMPT significa compte, que es Cuenta en inglés, la aplicación puede tener varias cuentas que contienen un campo de hospitalización y para cada campo de hospitalización presente en UNA cuenta, quiero poder calcular el total cost de cada hospitalización.
Actualmente puedo calcular el campo total(mntTotHosp) que se obtiene haciendo el cálculo del campo Tarif quotidien ( TariQuoti) * Nombre de jours (NbJrsHosp) . En español: Daily price * numbers of days .
Pero esto funciona solo para la primera hospitalización (ListeHospitalisation[0].mntTotHosp) al hacer esto:
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(".", ",")); }Mi problema :
Me gustaría hacer esto para cada CmptETS en la lista ListeCmptETS y cada Hospitalisation contenida en ListeHospitalisation que está contenida en ListeCmptETS . Actualmente solo es capaz de calcular el total de la primera hospitalización presente en la primera cuenta.
Aquí hay una captura de pantalla de los 3 campos utilizados para hacer el cálculo, para tener una mejor comprensión de los datos: 
Lo siento, el texto está en francés en la aplicación, pero aquí hay una representación visual para ver los datos:
Con suerte, esto fue lo suficientemente claro, ¿alguien podría ayudar? Muchas gracias :)
1 Respuestas
Responde la pregunta0
Fue un poco difícil saber qué sugerir sin ver más código, pero tal vez este ejemplo con sabor a vainilla pueda ayudarlo a comenzar:
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>