11528 sujets

JavaScript, DOM et API Web HTML5

Comment compter les lignes dans une boucle javascript

bonsoir a tous
comment je pourrais compter le nombre de ligne dans cette boucle et les afficher sur une autre page html
pour le code je pense que cela doit etre ca
mais ensuite comment afficher le total 


var count = 0;
for(var i in panierArray) {
   
       for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
    + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + " euro</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
         //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      +  "</div>";
     
count++;
        }

Modifié par flexi2202 (12 Jan 2022 - 22:24)
La question est pas très claire, qu'est-ce que tu entends par ligne?
Modifié par vzytoi (12 Jan 2022 - 22:36)
Si tu veux compter le nombre d'itérations dans la boucle alors elle vaudra simplement

console.log(panierArray.length ** 2)

Si tu entends par ligne le nombre de div, input ou button, tu en as 9 par itérations donc:

console.log(panierArray.length * ( panierArray.length * 9))
console.log(panierArray.length ** 2 + panierArray.length * 9)

Je ne penses pas répondre à la question, si tu peux apporter plus de précisions ça nous permettrais de pouvoir te répondre
Modifié par vzytoi (12 Jan 2022 - 22:36)
bonjour Merci pour la réponse


en fait je souhaiterais connaître le total absolu de cette variable 
panierArray[i].quantite
et l afficher sur une page html ou se trouve le bon de commande

donc faire l addition de tout les 
panierArray[i].quantite

Modifié par flexi2202 (12 Jan 2022 - 23:05)
Tu peux essayer ceci ?

const sum = (obj) => {
    let t = 0;
    for (var el in obj) {
        t += obj[el].quentite;
    }
    return t;
};

console.log(sum(panierArray));
un grand merci cela fonctionne tout comme ceci
  var count =0;
  var countart=0;
  for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>(" + panierArray[i].prix.toFixed(0) + ")</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      +  "</div>";
       count++;
countart += panierArray[i].quantite; 
console.log(countart  );
        }


donc a présent que j'ai bien le nombre d articles total
je souhaiterais pouvoir les afficher sur mon code html

tout ce passe dans cette fonction , j'ai essaye de le faire pour countart mais rien ne s affiche

function afficherpanier() {
  var panierArray = MonPanier.listpanier();
  var output = "";
  var count =0;
  var countart=0;
  for(var i in panierArray) {
    output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>(" + panierArray[i].prix.toFixed(0) + ")</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      +  "</div>";
       count++;
countart += panierArray[i].quantite; 
console.log(countart  );
        }
  $('.show-panier').html(output);

const sum = (obj) => {
    let t = 0;
    for (var el in obj) {
        t += obj[el].quantite;
    }
    return t;
};

console.log(sum(panierArray));

  if (Livraison == 3)
  {
     // % du prix total total correspondant au prix de la livraison
const cases = document.querySelectorAll('input[name="choix_livraison"]');
//const cases = document.querySelectorAll('input[name="ajout");
for (const x of cases) {
if (x.checked) {
let nom_choix_livraison = x.dataset.nom;
let prix_choix_livraison = x.value;
//console.log(panierArray[i] );

let prix_et_livraison = (( (MonPanier.totalpanier()*Poucentage_Livraison))) + Number(prix_choix_livraison) + Number(Forfait_Livraison ) ;
console.log(countart  );
//document.getElementById('amount').value = prix_et_livraison ;
$('.total-panier').html(prix_et_livraison.toFixed(2));
document.getElementById('nouveau_prix').innerHTML = "<div class='col'style ='background-color: #79ff94;text-align:center;'>Nouveau prix apres la remise</div><div class='col' style ='background-color: #79ff94;text-align:center;'>-" + (MonPanier.totalpanier()- (MonPanier.totalpanier()*Poucentage_Livraison_opposse)) + " euros</div> ";
document.getElementById('remise').innerHTML = "<div class='row'><div class='col'></div><div class='col'></div><div class='col'></div><div class='col'style ='background-color: #ea51d2;text-align:center;'>Montant ristourne si disponible</div><div class='col' style ='background-color: #ea51d2;text-align:center;'>-" + MonPanier.totalpanier()*Poucentage_Livraison_opposse + " euros</div> </div>";
document.getElementById('livraison-detail').innerHTML = "<div class='row' style ='margin-bottom:5px;'><div class='col'></div><div class='col'style='text-align:center;background-color: #78b8df;'>Livraison </div><div class='col ' style='text-align:center;background-color: #78b8df;'>Méthode</div><div class='col' style='text-align:center;background-color: #78b8df;'> (" + nom_choix_livraison + ") </div><div class='col' style='text-align:center;background-color: #78b8df;'> " + prix_choix_livraison +" euro(s)</div></div>";
document.getElementById('frais-fixe').innerHTML = "<div class='row' style ='margin-bottom:5px;'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + Forfait_Livraison + "  " +" euro</div></div>";
document.getElementById('countart').innerHTML = "<div class='row' style ='margin-bottom:5px;'>" + "<div class='col'></div><div class='col' ></div><div class='col'></div> <div class='col' style='text-align:center;background-color: #78b8df;'>Frais fixe </div><div class='col' style='text-align:center;background-color: #78b8df;'>" + countart + "  " +" euro</div></div>";

break;
  }
  }
  }
  if (Livraison == 1)
  {
$('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total.";
 console.log("Poucentage_Livraison: " + Poucentage_Livraison );
  }
  if (Livraison == 2)
  {
$('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison).toFixed(0));
document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Forfait_Livraison +" euros.";
  }
  if (Livraison == 0)
  {
$('.total-panier').html(((MonPanier.totalpanier())).toFixed(0));
  }

  $('.total-panier-modal').html(MonPanier.totalpanier());
  $('.total-quantite').html(MonPanier.totalquantite());
  if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0))
  {
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
  }
  else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (MonPanier.totalquantite() != 0))
  {
document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok;
  }
  else if (Qte_Minimum == 1)
  {
    document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut;  
  }
  else if (Qte_Minimum == 0)
  {
document.getElementById('qte_minimum_report').innerHTML = "";
  }  
}


ou 'on voit des document.getElementById('l').innerHTML que je récupère sur ma page html

de cette façon sauf pour countart qui refuse s'afficher 
  <i id="countart"></i> 
                                 <i id="nouveau_prix"></i>
                                  <i id="livraison-detail"></i>
                  <i id="frais-fixe"> </i>


et dans le fond de ma page html j'ai ceci

 <script>
         function commander(nom,prenom,cp,email,commande,prix_total,message,ville,detail_livraison,nom_mondial,adresse_mondial,cp_mondial,ville_mondial,pays_mondial){
         $.ajax({
         url : 'mail.php',
         type : 'post', 
         data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville + '&livraison=' + detail_livraison + '&nom_mondial=' + nom_mondial + '&adresse_mondial=' + adresse_mondial + '&cp_mondial=' + cp_mondial + '&ville_mondial=' + ville_mondial + '&pays_mondial=' + pays_mondial , 
         dataType : 'html',
         success : function(reponse){
         if (reponse == "1"){
         	MonPanier.clearpanier();
         	afficherpanier();	
         	document.body.scrollTop = 0;
         	document.documentElement.scrollTop = 0;
         	$('#mymodal').modal('show');	
         }
         if (reponse == "0"){$('#mymodal_erreur').modal('show');}
         }
         });
         }
         $('#commander').click( function(){
         var nom = document.getElementById("nom").value;
         var prenom = document.getElementById("prenom").value;
         var cp = document.getElementById("cp").value;
         var ville = document.getElementById("ville").value;
         var email = document.getElementById("email").value;
         var commande = JSON.stringify(panier);
         var detail_livraison = document.getElementById("livraison-detail").innerHTML;
         var remise = document.getElementById("remise").innerHTML;
         var countart = document.getElementById("countart").innerHTML;
         var nouveau_prix = document.getElementById("nouveau_prix").innerHTML;
         var prix_total = document.getElementById("prix_total").innerHTML;
         var message = encodeURIComponent(document.getElementById("message").value);
         var nom_mondial = document.getElementById("nom_mondial").value;
         var adresse_mondial = document.getElementById("adresse_mondial").value;
         var cp_mondial = document.getElementById("cp_mondial").value;
         var ville_mondial = document.getElementById("ville_mondial").value;
         var pays_mondial = document.getElementById("pays_mondial").value;
         //var mondial_relay= document.getElementById("mondial_relay").value;
         commander(nom,prenom,cp,email,commande,prix_total,message,ville,detail_livraison,nom_mondial,adresse_mondial,cp_mondial,ville_mondial,pays_mondial);
         });
      </script>
voila je suis parvenu a savoir ou cela se passait
mais le résultat que j'obtiens n'est pas
si j aoute un seul produit
le résultat est de 0 articles peu importe le nombre d article
lorsque j ajoute un deuxième article le résultat du nombre d article est = a celui de la ligne précédente
donc j 'ai un soucis dans ma boucle qui compte les quantités

voici le code si vous pouviez m'aider
function afficherpanier() {
  var panierArray = MonPanier.listpanier();
  var output = "";
  var countart=0;
  var count=0;
    for(var i in panierArray) {
             output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>(" + panierArray[i].prix.toFixed(0) + ")</div>"
      + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>"
      + "<input type='number' min='1' class='form-control item-quantite' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
      + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
      //+ ' = ' 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
      + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + countart + " articles</div>"
            +  "</div>";
        count++;
       
countart += panierArray[i].quantite;  // somme des unités d'articles
console.log(countart );
console.log(panierArray[i].quantite );

const total = panierArray.reduce((acc,val) => acc + val.quantite, 0);
console.log(total );

}
Sujet clos
Aller à