Partage
  • Partager sur Facebook
  • Partager sur Twitter

mauvaise boucle en javascript

    2 février 2023 à 19:18:00

    Bonjour,

    Voila je suis en train de developper un tableau qui recupère les horaires de la semaine selectionné depuis une base de donné local.(nedb)
    cela fonctionne correctement sauf que lorsque je change plusieur fois a la suite la semaine, il y a une boucle qui reviens 2 fois puis 3 fois .... jusqua faire planter l'application
    Je début dans le javascript, et je ne trouve pas la boucle qui s'ajoute a chaque click.

    $(document).ready(function () {
      //charger BDD
      var Datastore = require("nedb"),
        db = new Datastore({ filename: "dataCalendar.db", autoload: true });
    
      //recupere le numero de la semaine
      var dateShowed = document.getElementById("titreTable");
      dateShowed.innerHTML = "Semaine" + " " + moment().week();
    
      selectableDate = new Date();
      // console.log("new date",selectableDate);
    
      const prevMonth = document.getElementById("prevMonth");
      const nextMonth = document.getElementById("nextMonth");
    
      ///moment passer en fr debut lundi///
      moment.updateLocale("fr", { week: { dow: 1 } });
    
    
      ///*********************************************************************** */
      loadTableLignes = function (date) {
        console.log("***date", date);
    
        //gestion du click sur les Btns + modif du mois
        prevMonth.addEventListener("click", () => {
          selectableDate = moment(date);
          selectableDate = selectableDate.subtract(1, "week");
          selectableDate = moment(selectableDate);
          dateShowed.innerHTML = "Semaine" + " " + selectableDate.week();
          loadTableLignes(selectableDate);
          console.log("1er select",selectableDate);
        });
        nextMonth.addEventListener("click", () => {
          selectableDate = moment(date);
          dateShowed.innerHTML = selectableDate.add(1, "week");
          selectableDate = moment(selectableDate);
          dateShowed.innerHTML = "Semaine" + " " + selectableDate.week();
          loadTableLignes(selectableDate);
        });
    
        let currentWeek = moment(date).startOf("week");
        let nextWeek = moment(date).endOf("week");
    
        db.find({}, function (err, docs) {
          // filtre la semaine select
          let filteredEvents = docs.filter(function (docs) {
            let eventDate = moment(docs.start);
            return eventDate.isBetween(currentWeek, nextWeek);
            // console.log(filteredEvents);
          });
          filteredEvents.sort(function (a, b) {
            return new Date(a.start) - new Date(b.start);
          });
    
          // console.log("allfiltre", filteredEvents);
    
          var tableRegistre = document.getElementById("dataTable");
          var tableRows = tableRegistre.querySelectorAll("thead > tr");
    
          //on supprime les ligne
          tableRows.forEach((el, i) => {
            if (i > 0) el.parentNode.removeChild(el);
          });
    
    
          ///filtre Cindy///
          let selectedCindy = filteredEvents.filter((el) => el.title == "Cindy");
          const startEndCindy = selectedCindy.map(
            (event) =>
              `${event.start.toString().substring(11, 16)} - ${event.end
                .toString()
                .substring(11, 16)}`
          );
          
    
          let selectedPierre = filteredEvents.filter((el) => el.title == "Pierre");
          const startEndPierre = selectedPierre.map(
            (event) =>
              `${event.start.toString().substring(11, 16)} - ${event.end
                .toString()
                .substring(11, 16)}`
          );
    
          let selectedJean = filteredEvents.filter((el) => el.title == "Jean");
          const startEndJean = selectedJean.map(
            (event) =>
              `${event.start.toString().substring(11, 16)} - ${event.end
                .toString()
                .substring(11, 16)}`
          );
          const dateFrtableau = selectedJean.map((event) => `${event.start}`);
          let formattedDates = dateFrtableau.map((dateString) => {
            let date = new Date(dateString);
            let options = { weekday: "long", day: "numeric", month: "long" };
            return date.toLocaleDateString("fr-FR", options);
          });
    
          console.log("format date", formattedDates);
          // boucle le tableaux
    
          for (var i = 0; i < startEndCindy.length; i++) {
            for (var i = 0; i < startEndPierre.length; i++) {
              for (var i = 0; i < startEndJean.length; i++) {
                for (var i = 0; i < formattedDates.length; i++) {
                  //creation d'une ligne
                  var row = tableRegistre.insertRow(i + 1);
                  //creation des cellules
                  var cell1 = row.insertCell(0);
                  var cell2 = row.insertCell(1);
                  var cell3 = row.insertCell(2);
                  var cell4 = row.insertCell(3);
                  //injecter le contenu des cellules
                  cell1.innerHTML = formattedDates[i];
                  cell2.innerHTML = startEndCindy[i];
                  cell3.innerHTML = startEndJean[i];
                  cell4.innerHTML = startEndPierre[i];
                }
              }
            }
          }
        });
      };
      loadTableLignes();
    });
    
    
    
    

    voici un screen pour mieux comprendre mon projet

    https://postimg.cc/JDG9LnL7

    • Partager sur Facebook
    • Partager sur Twitter
      3 février 2023 à 12:31:55

      var row = tableRegistre.insertRow(i + 1);
      cell1.innerHTML = formattedDates[i];

      i, c'est quoi au juste ? i est défini 4 fois par var dont la portée est l'ensemble de la fonction.

      let plutôt que var permettrait au moteur de mieux s'y retrouver. Et changer le nom en j, k, l aussi, pour nous cette fois-ci.

      Cordialement.

      -
      Edité par Domi65 3 février 2023 à 17:12:23

      • Partager sur Facebook
      • Partager sur Twitter
        3 février 2023 à 17:52:22

        merci pour votre réponse oui j'ai dupliqué les ligne sans changer le nom des variables,(une erreur d'inattention) 

        maintenant j ai toujours ce problème de boucle j'ai un table comme celui ci:

        [
            "09:00 - 11:30",
            "09:00 - 11:30",
            "12:00 - 17:00"
        ]

        et si je fais:

        for (let i of startEndCindy) {
                console.log(startEndCindy);}

        ou 

        for (var j = 0; j < startEndCindy.length; j++) {}



        il me boucle 3 fois le tableau, je cherche a récupérer les valeurs comme ceci:

            "09:00 - 11:30",
            "09:00 - 11:30",
            "12:00 - 17:00"

        et non pas 3 fois le tableau

        -
        Edité par jérémyBriend1 3 février 2023 à 17:53:35

        • Partager sur Facebook
        • Partager sur Twitter
          3 février 2023 à 18:07:45

          C'est normal, si tu fais :

          POUR CHAQUE i DANS tableau
              AFFICHER tableau
          FIN POUR


          Il est logique que ça affiche autant de fois le tableau qu'il y a de lignes dans ce dernier.

          Il faudrait console.log(i) au mieux

          Par contre je vois 4 boucle for imbriquer dans le premier code et ça me fait peur. Quel est le but de ces boucles imbriqué ?

          • Partager sur Facebook
          • Partager sur Twitter
            3 février 2023 à 18:41:11

            j'ai essayer par plusieurs moyen pour inséré les tableaux dans des lignes.

            comme les résultats dans des boucles, je ne peux pas les récupérées. 

             si j'essai de déporter la variable, elle me prend que le première et non la boucle complet.

            j'ai essayer ce code mais je me retrouve en face du problème pour l'index du tableau:

                            for (var k = 0; k < formattedDates.length; k++) {
                                  var row = tableRegistre.insertRow(1);                      
                                  var cell1 = row.insertCell(0);
                                  cell1.innerHTML = formattedDates[k];
                                  
                            for (var l = 0; l < startEndCindy.length; l++) {
                                  var row = tableRegistre.insertRow(1);                      
                                  var cell2 = row.insertCell(1);
                                  cell2.innerHTML = startEndCindy[l];
                                 
                            }
                            for (var m = 0; m < startEndJean.length; m++) {
                                  var row = tableRegistre.insertRow(1);                      
                                  var cell3 = row.insertCell(2);
                                  cell3.innerHTML = startEndJean[m];
                                  
                            }
                            for (var n = 0; n < startEndPierre.length; n++) {
                                  var row = tableRegistre.insertRow(1);                      
                                  var cel4 = row.insertCell(3);
                                  cell4.innerHTML = startEndPierre[n];

            cela me retourne :Failed to execute 'insertCell' on 'HTMLTableRowElement': The value provided (2) is outside the range [-1, 0]

            -
            Edité par jérémyBriend1 4 février 2023 à 9:55:14

            • Partager sur Facebook
            • Partager sur Twitter

            mauvaise boucle en javascript

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown