Partage
  • Partager sur Facebook
  • Partager sur Twitter

grouper les données dans un array javascript

    22 avril 2023 à 9:51:00

    Bonjour

    Suite à un retour via l'objet new XMLHttpRequest();, je me retrouve avec cet objet (données partielles)

    0
    : 
    {Saison: '2008/2009', Poste: 'Arbitre centre', Nombre: 25, Pourcentage: '69.44 %'}
    1
    : 
    {Saison: '2008/2009', Poste: 'Arbitre assistant 2', Nombre: 9, Pourcentage: '25.00 %'}
    2
    : 
    {Saison: '2008/2009', Poste: 'Arbitre assistant 1', Nombre: 2, Pourcentage: '5.56 %'}
    3
    : 
    {Saison: '2009/2010', Poste: 'Arbitre assistant 2', Nombre: 9, Pourcentage: '24.32 %'}
    4
    : 
    {Saison: '2009/2010', Poste: 'Arbitre centre', Nombre: 24, Pourcentage: '64.86 %'}
    5
    : 
    {Saison: '2009/2010', Poste: 'Arbitre assistant 1', Nombre: 4, Pourcentage: '10.81 %'}
    6
    : 
    {Saison: '2010/2011', Poste: 'Arbitre centre', Nombre: 27, Pourcentage: '56.25 %'}
    7
    : 
    {Saison: '2010/2011', Poste: 'Arbitre assistant 2', Nombre: 12, Pourcentage: '25.00 %'}
    8
    : 
    {Saison: '2010/2011', Poste: 'Arbitre assistant 1', Nombre: 9, Pourcentage: '18.75 %'}
    9
    : 
    {Saison: '2011/2012', Poste: 'Arbitre centre', Nombre: 26, Pourcentage: '61.90 %'}
    10
    : 
    {Saison: '2011/2012', Poste: 'Arbitre assistant 2', Nombre: 12, Pourcentage: '28.57 %'}
    11
    : 
    {Saison: '2011/2012', Poste: 'Arbitre assistant 1', Nombre: 4, Pourcentage: '9.52 %'}


    J'ai groupé les saisons grâce à ce code

    	var tmp=[];
    	for (var i = 0; i < BackValue.length; i++) {
    		if (tmp.indexOf(BackValue[i]["Saison"]) === -1) {
    			tmp.push(BackValue[i]["Saison"]);
    		}
    	}

    Ce qui me donne ceci, mais sans le reste des données

    0
    : 
    "2008/2009"
    1
    : 
    "2009/2010"
    2
    : 
    "2010/2011"
    3
    : 
    "2011/2012"
    4
    : 
    "2012/2013"
    5
    : 
    "2013/2014"
    6
    : 
    "2014/2015"
    7
    : 
    "2015/2016"
    8
    : 
    "2016/2017"
    9
    : 
    "2017/2018"
    10
    : 
    "2018/2019"
    11
    : 
    "2019/2020"
    12
    : 
    "2020/2021"
    13
    : 
    "2021/2022"
    14
    : 
    "2022/2023"

    Je pense qu'il faut que je créé un array pour chaque de ces sorties, afin de pouvoir y insérer les autres données.

    Cependant, je n'arrive pas à créer les tableaux de façon dynamique.

    Merci d'avance pour votre aide.


    • Partager sur Facebook
    • Partager sur Twitter
      22 avril 2023 à 10:51:22

      Hello,

      Il faut d'abord voir quand une clef que tu veux n'existe pas, ce que tu fais et ensuite si la clef existe, qu'est-ce qui ce passe aussi :

      const data = {
          0: {Saison: '2008/2009', Poste: 'Arbitre centre', Nombre: 25, Pourcentage: '69.44 %'},
          1: {Saison: '2008/2009', Poste: 'Arbitre assistant 2', Nombre: 9, Pourcentage: '25.00 %'},
          2: {Saison: '2008/2009', Poste: 'Arbitre assistant 1', Nombre: 2, Pourcentage: '5.56 %'},
          3: {Saison: '2009/2010', Poste: 'Arbitre assistant 2', Nombre: 9, Pourcentage: '24.32 %'},
          4: {Saison: '2009/2010', Poste: 'Arbitre centre', Nombre: 24, Pourcentage: '64.86 %'},
          5: {Saison: '2009/2010', Poste: 'Arbitre assistant 1', Nombre: 4, Pourcentage: '10.81 %'},
          6: {Saison: '2010/2011', Poste: 'Arbitre centre', Nombre: 27, Pourcentage: '56.25 %'},
          7: {Saison: '2010/2011', Poste: 'Arbitre assistant 2', Nombre: 12, Pourcentage: '25.00 %'},
          8: {Saison: '2010/2011', Poste: 'Arbitre assistant 1', Nombre: 9, Pourcentage: '18.75 %'},
          9: {Saison: '2011/2012', Poste: 'Arbitre centre', Nombre: 26, Pourcentage: '61.90 %'},
          10: {Saison: '2011/2012', Poste: 'Arbitre assistant 2', Nombre: 12, Pourcentage: '28.57 %'},
          11: {Saison: '2011/2012', Poste: 'Arbitre assistant 1', Nombre: 4, Pourcentage: '9.52 %'},
      }
      
      // Notre objet final
      const seasons = {}
      
      for (let row of Object.values(data)) {
          const season = row.Saison
      
          const seasonData = seasons[season] ?? []
      
          seasonData.push({
              post: row.Poste,
              number: row.Nombre,
              percentage: row.Pourcentage,
          })
      
          seasons[season] = seasonData
      }
      
      console.log(seasons)
      


      Par contre je rebondi sur le fait que tu es dis : "Suite à un retour via l'objet new XMLHttpRequest()" sachant que de nos jours on utilise plus cet objet mais on passe par "fetch()", je te pose la question : est-ce que c'est un nouveau projet ou un ancien projet ?

      • Partager sur Facebook
      • Partager sur Twitter
        22 avril 2023 à 15:24:09

        Si ça t'intéresse ...
        html
        <select onChange="starter()"id="Selecteur_categorie">
        javascript
        function starter(categorie){
        var categorie=document.getElementById("Selecteur_categorie").value;
        if (categorie !== "" ){
        raz();
        document.getElementById("cadreresultat").style.visibility = "visible";
        loadDoc("Distance",categorie,"Distance_Rencontre","distance_rencontre", distance_rencontre,"un");
        loadDoc("Nombre de rencontres",categorie,"Statistiques", "statistique",stat,"deux");
        loadDoc("Fonctions",categorie,"Fonction_Rencontre","fonction_rencontre", fonction_rencontre,"trois");
        }
        }
        function loadDoc(titre,categorie,origine, machin,cFunction,receptacle) {
        var machin;
        machin=new XMLHttpRequest();
        machin.onreadystatechange = function() {
        if(this.readyState == 1){
        //boite
        var boite=document.createElement("div");
        boite.id=receptacle+"texte";
        boite.classList.add("cadreBlocResultat");
        boite.style.width="40%";
        //titre
        let titleHtml = document.createElement("h1");
        let title = document.createTextNode(titre);
        titleHtml.appendChild(title);
        boite.appendChild(titleHtml);
        let p = document.createElement("p");
        p.id=origine;
        p.setAttribute("align", "center");
        //contenu=>boite
        boite.appendChild(p);
        document.getElementById(receptacle).appendChild(boite);
        document.getElementById("cadreresultat").appendChild(document.getElementById(receptacle));
        creationImage(document.getElementById(origine));
        //graph
        var boite=document.createElement("div");
        boite.id=receptacle+"graf";
        boite.classList.add("cadreBlocResultat");
        boite.style.alignSelf="center";
        boite.style.width="60%";
        var x = document.createElement("canvas");
        x.id="Graphique"+titre;
        boite.appendChild(x);
        var x = document.createElement("canvas");
        x.id="Graphique"+titre+"2";
        boite.appendChild(x);
        document.getElementById(receptacle).appendChild(boite);
        }
        else if (this.readyState == 4 && this.status == 200) {
        cFunction(this);
        }
        };
        machin.open('POST','StatGlobales/StatGlobales.php',true);
        machin.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        machin.send("origine="+origine+"&categorie="+categorie);
        }
        php
        if($_POST["origine"] === "Fonction_Rencontre"){
        $requete='SELECT "'.$datedepart.'/'.$datemilieu.'" as "Saison",fonction_rencontre as Poste,COUNT(fonction_rencontre) as Nombre,CONCAT(ROUND(100*COUNT(*)/ (SELECT COUNT(*) FROM rencontres WHERE num_rencontre IN (SELECT num_rencontre FROM rencontres WHERE date_rencontre BETWEEN "'.$datedepart.'-07-01" and "'.$datemilieu.'-06-30" '.$cat.')),2), " %") as Pourcentage FROM rencontres WHERE date_rencontre BETWEEN "'.$datedepart.'-07-01" and "'.$datemilieu.'-06-30" '.$cat.' group by fonction_rencontre ';
        while ($datemilieu < $datearrivee) {
        $tmstp1 = strtotime(date("Y-m-d"));
        $tmstp2 = strtotime($datemilieu."-07-01");
        $dateinter=$datemilieu;
        $datemilieu++;
        if($tmstp1-$tmstp2>0){
        $requete=$requete.' union SELECT "'.$dateinter.'/'.$datemilieu.'" as "Saison",fonction_rencontre as Poste,COUNT(fonction_rencontre) as Nombre,CONCAT(ROUND(100*COUNT(*)/ (SELECT COUNT(*) FROM rencontres WHERE num_rencontre IN (SELECT num_rencontre FROM rencontres WHERE date_rencontre BETWEEN "'.$dateinter.'-07-01" and "'.$datemilieu.'-06-30" '.$cat.')),2), " %") as Pourcentage FROM rencontres WHERE date_rencontre BETWEEN "'.$dateinter.'-07-01" and "'.$datemilieu.'-06-30" '.$cat.' group by fonction_rencontre ';
        }
        }
        $rqt = $dbh->prepare($requete);
        $rqt->execute(array());
        }
        $ligne = $rqt->fetchAll(PDO::FETCH_ASSOC);
        array_walk_recursive($ligne, "replaceNullValueWithEmptyString");
        $rqt->closeCursor();
        echo (json_encode($ligne));
        javascript
        function fonction_rencontre(machin){
        //ce que tu as écrit
        }

        -
        Edité par DashcamVienne 23 avril 2023 à 11:39:30

        • Partager sur Facebook
        • Partager sur Twitter
          22 avril 2023 à 16:11:38

          @DashcamVienne Bonjour, je viens de retirer des spams votre dernier message, si cela arrive encore vous pouvez poster dans ce sujet Si votre message est considéré comme spam

          Merci d'insérer votre code avec l'outil d'insertion du forum.

          Merci de colorer votre code à l'aide du bouton Code

          Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

          Merci de modifier votre message d'origine en fonction.

          • Partager sur Facebook
          • Partager sur Twitter
            24 avril 2023 à 16:00:18

            Bonjour

            Comment fait-on pour parcourir le tableau pour chaque saison?

            2008/2009
            : 
            Array(3)
            0
            : 
            {Poste: 'Arbitre centre', Nombre: 25, Pourcentage: '69.44 %'}
            1
            : 
            {Poste: 'Arbitre assistant 2', Nombre: 9, Pourcentage: '25.00 %'}
            2
            : 
            {Poste: 'Arbitre assistant 1', Nombre: 2, Pourcentage: '5.56 %'}

            Code :

            function fonction_rencontre(machin){
            	BackValue = JSON.parse(machin.responseText);
            
            	const seasons = {}
            	 
            	for (let row of Object.values(BackValue)) {
            		const season = row.Saison
            	 
            		const seasonData = seasons[season] ?? []
            	 
            		seasonData.push({
            			Poste: row.Poste,
            			Nombre: row.Nombre,
            			Pourcentage: row.Pourcentage,
            		})
            	 
            		seasons[season] = seasonData
            	}
            console.log(seasons);
            	var titre= { "Saison": "Saison","Total": "THTotal"};
            		
            	document.getElementById("Fonction_Rencontre").textContent = '';
            		
            	var TableTag = document.createElement("table");
            	TableTag.id="Fonction_Rencontretable";
            	
            	var theadTag = document.createElement("thead");
            	var trTag = document.createElement("tr");
            
            	//titre
            	for (const property in titre) {
            		var thTag = document.createElement("th");
            		var newtext = document.createTextNode(`${property}`);
            		thTag.appendChild(newtext);
            		thTag.id=`${titre[property]}`+"Fonctions";
            		trTag.appendChild(thTag);
            	}
            	TableTag.appendChild(trTag);
            	
            	//ligne
            	for (const property in seasons) {
            			var trTag = document.createElement("tr");
            			var tdTag = document.createElement("td");
            			var newtext = document.createTextNode(`${property}`);
            			tdTag.appendChild(newtext);	
            			trTag.appendChild(tdTag);
            			
            
            				var tdTag = document.createElement("td");
            				
            					
            					var newtext = document.createTextNode(`${seasons[property][0]['Poste']}`+" : "+`${seasons[property][0]['Nombre']}`+" ( "+`${seasons[property][0]['Pourcentage']}`+" ) ");
            					tdTag.appendChild(newtext);
            					//var newtext = document.createTextNode(`${seasons[property][1]['Poste']}`+" : "+`${seasons[property][1]['Nombre']}`+" ( "+`${seasons[property][1]['Pourcentage']}`+" ) ");
            					//tdTag.appendChild(newtext);
            					
            					
            					
            				trTag.appendChild(tdTag);
            
            			
            			TableTag.appendChild(trTag);
            			
            	}




            Merci d'avance

            • Partager sur Facebook
            • Partager sur Twitter

            grouper les données dans un array 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