Partage
  • Partager sur Facebook
  • Partager sur Twitter

Tableau JExcel et Ajax POST

Comment exporter correctement les données de son tableau

Sujet résolu
    19 juillet 2019 à 17:25:03

    Bonjour, 

    Je travaille sur la construction d'un tableau avec JExcel, qui permet de faire des tableaux comme Excel avec du javascript. 

    En ce moment j'essaye d'exporter les données de mon tableau avec de l'ajax. Je travaille avec Symfony 3.2

    Voilà ma partie JS/ajax 

    <script type="text/javascript"> 
    
    		var myTable = jexcel(document.getElementById('jExcelDiv'), {
    		data:data3
    	});
    	
    	$(function(){
    		$('#saveButton').click(function(){
    		
    	
    			var newData = new Array(); 
    			for (var z = 1 ; z <=data3.length-1 ; z++)
    			{
    				newData[z] = myTable.getRowData(z) ; 
    				console.log(newData); 
    			}
    			
    			$.ajax({
    				type :'POST',
    				url: "{{ path('oc_advert_save') }}",
    		
    				data:  newData,  
                    async: true, 
                    processData: false,
                    cache: false,
    				
    				success: function (data) {
                        consoleMsg.innerHTML = 'Data saved';
    					console.log(data) ; 
    					
                    },
    				
    				error: function (xhr) {
                        consoleMsg.innerHTML = 'Error when saving';
    					console.log(xhr) ; 
                        
                    },
    			});
    		});
    	});
    	</script>


    Au début je boucle pour construire un tableau associatif. 

    Voilà le tableau que je veux envoyer à mon controleur : 

    1: (6) [18, "2019-07-12T09:04:00+00:00", "efsdfsdfsdfsf", "sdfsdf", "sdffsd", "efsdfsdfsdfsf"]
    2: (6) [17, "2019-07-11T15:15:00+00:00", "Security officer", "Intermarché", "Surveiller les clients", "security-officer"]
    3: (6) [16, "2019-07-11T08:42:00+00:00", "Manutentionnaire", "Leroy Merlin", "Soulever des cartons", "manutentionnaire"]
    4: (6) [15, "2019-07-04T12:54:00+00:00", "Testtestestest", "Test", "Testtestetstetsts", "testtestestest"]
    5: (6) [14, "2019-07-04T08:09:00+00:00", "Recherche Technicien informatique", "La Poste", "Assiter Monique", "recherche-technicien-informatique"]
    6: (6) [13, "2019-07-03T15:20:00+00:00", "Recherche alternant", "STMicroElectronixxx", "Travail sur microchips controller embarqué STM532", "recherche-alternant"]
    7: (6) [12, "2019-07-03T09:58:00+00:00", "CDI webmaster", "Jules", "blablabla", "cdi-webmaster"]
    8: (6) [7, "2019-07-02T12:44:00+00:00", "Rech dev c# - BNP", "BNP", "Remb 100% Navigo 3k€/mois + bonus", "rech-dev-c-bnp"]
    9: (6) [3, "2019-07-01T09:09:00+00:00", "a", "a", "aa", "a"]
    
    
    (tirer de la console, faites pas attention aux données elles sont bidons)

    Et mon problème, voilà ce que ça m'envoie : 

    Tout mon tableau par dans la clé, plus aucune valeur associée. 

    Si je spécifie un content Type et un dataType ça ne résout rien, pareil si je passe en GET, pareil si j'associe mes données avec par exemple {'newData' : newData},

    Quelqu'un à une piste pour résoudre ça ? 

    Merci bonne fin de semaine à tous.

    -
    Edité par Sooyouz92 19 juillet 2019 à 17:27:26

    • Partager sur Facebook
    • Partager sur Twitter
      20 juillet 2019 à 11:38:57

      Salut,

      Je ne comprends pas comment tu peux obtenir ce log et ces paramètres POST avec le code que tu montres.

      Ligne 15, quand tu console.log newData (au passage, myTable, newData, data3... ce sont vraiment des noms de variables pourris) je m'attends à voir dans la console un array à deux dimensions contenant tes données en entier qui s'incrémentent à chaque log, pas juste un array par ligne.

      Dans ton POST, je remarque que ce qui est envoyé ressemble pas mal à du CSV : tu aurais toutes les clés sur la première "ligne", puis une ligne par entrée, à ceci près que les retours à la ligne ne sont pas passés. Donc c'est pas un objet littéral avec des couples clé/valeur que tu envoies.

      -
      Edité par tabouretBleu 20 juillet 2019 à 11:53:35

      • Partager sur Facebook
      • Partager sur Twitter
        22 juillet 2019 à 11:30:33

        Salut Tabouret, merci pour ta réponse. 

        Oui mes noms de variables sont pourris, je n'ai pas encore assez de recul et d'xp pour en trouver de meilleur instinctivement.

        J'ai bien mon tableau qui est construit, un tableau de tableau. Je ne sais pas pourquoi ça commence par empty..

        Oui on dirait du CSV c'est vrai, je vais essayé de trouver un moyen pour le convertir en JSON et voir ce qui se passe, j'y crois pas vraiment car j'ai déjà essayer de mettre dans le data à transmettre {'index' : {"tableau":"json"}}, ça me retourne une erreur comme quoi il ne reconnaissait pas 'index'. 

        Sinon il existe pas un moyen pour récupérer seulement la key de mon POST ? 

        • Partager sur Facebook
        • Partager sur Twitter
          22 juillet 2019 à 12:12:01

          Bonjour.

          Petite astuce, au lieu de faire z <= data3.length - 1, fais directement z < data3.length.

          Inutile de vouloir soustraire 1 à une valeur dans une condition de comparaison si tu peux le définir directement dans l'opérateur de comparaison.

          • Partager sur Facebook
          • Partager sur Twitter

          Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

            22 juillet 2019 à 12:56:03

            Salut Lartak, 

            Oui tu as raison c'est inutile... j'ai corrigé.

            J'ai peut être trouvé un moyen, dans mon controleur  j'ai réussi à prendre toute la clé à la mettre dans un tableau comme ceci : 

            $key = array_keys($_POST) ; 
            		   $stringKeys = implode("," , $key); 
            		   $tabKeys = explode(",",$stringKeys) ; 
            //Voici $tabKeys
            Array
            (
                [0] => id
                [1] => date
                [2] => title
                [3] => author
                [4] => content
                [5] => slug
                [6] => 18
                [7] => 2019-07-12T09:04:00_00:00
                [8] => efsdfsdfsdfsf
                [9] => sdfsdf
                [10] => sdffsd
                [11] => efsdfsdfsdfsf
                [12] => 17
                [13] => 2019-07-11T15:15:00_00:00
                [14] => Security_officer
                [15] => Intermarché
                [16] => Surveiller_les_clients
                [17] => security-officer
                .... => ......

            Ca peut paraitre stupide d'implode le tableau, pour en reconstruire un derrière, mais je ne peux pas par exemple faire $valeur = key[2]; , par contre $tabKeys[2] ça fonctionne. Donc bon..je ferai avec.

            Je ne suis pas encore sorti d'affaire mais du coup il ne me reste qu'à agencer toutes ces données proprement, et je pourrai enfin mettre à jour ma base.

            • Partager sur Facebook
            • Partager sur Twitter
              22 juillet 2019 à 12:56:19

              HugoMathieu5 a écrit:

              Je ne sais pas pourquoi ça commence par empty.


              Alors ça c'est très simple : tu initialises z à la valeur 1, alors qu'en Javascript on compte toujours à partir de 0. Donc tu as laissé le premier slot de newData vide en fait. J'imagine que tu fais ça parce que la première ligne de myTable est la ligne d'en-tête avec les titres des colonnes et que tu ne veux pas les voir dans ton POST. Dans ce cas initialise z à 0 et écris

              for (var z = 0 ; z < data3.length - 1 ; z++) {
                  newData[z] = myTable.getRowData(z + 1) ;
              }

              (au passage, en Javascript, prend l'habitude de placer tes accolades ouvrantes en fin de ligne, pas en début d'une nouvelle ligne, tu éviteras les problèmes)

              Cela dit je ne suis pas sûr que ton problème vienne de l'à. Je ne comprends pas du tout comment un array à deux dimensions peut avoir la gueule de ton POST une fois passé en paramètre de $.ajax. D'où viennent les titres des colonnes justement ? jQuery ne les a pas inventé.

              • Partager sur Facebook
              • Partager sur Twitter
                22 juillet 2019 à 17:34:14

                D'accord, merci pour ces éclaircicements ! 

                Je récupère le noms de mes colonnes comme ceci dans mon controleur (ce sont les colonnes de ma table)

                $em = $this->getDoctrine()->getManager() ; 
                	$columnsName = $em->getClassMetadata('OCPlatformBundle:Advert')->getColumnNames();

                J'envoie $columnsName au twig et je fais le tri, car je ne veux pas de toutes les colonnes : 

                var columnsNames = '{{columnsTable}}'.split(',') ; 
                
                	 
                		var data3 = [] ; 
                		data3.push(columnsNames) ; 
                		data3[0].splice(5,3) ;
                		

                J'ai bien mon tableau avec toutes mes données dedans (clé et valeur confondues), il fait 60 de longueur, j'ai 6 colonnes, sa longueur sera toujours un multiple de 6. 

                Array
                (
                    [0] => id
                    [1] => date
                    [2] => title
                    [3] => author
                    [4] => content
                    [5] => slug
                    [6] => 18
                    [7] => 2019-07-12T09:04:00_00:00
                    [8] => efsdfsdfsdfsf
                    [9] => sdfsdf
                    [10] => sdffsd
                    [11] => efsdfsdfsdfsf
                    [12] => 17
                    [13] => 2019-07-11T15:15:00_00:00
                    [14] => Security_officer
                    [15] => Intermarché
                    [16] => Surveiller_les_clients
                    [17] => security-officer
                    [18] => 16
                    [19] => 2019-07-11T08:42:00_00:00
                    [20] => Manutentionnaire
                    [21] => Leroy_Merlin
                    [22] => Soulever_des_cartons
                    [23] => manutentionnaire
                    [24] => 15



                Maintenant j'ai un nouveau souci. 

                Mon idée était de boucler sur ce tableau, et le parcourir de 6 en 6, car toutes les 6 "cases", j'ai un ID, puis les valeurs qui y sont liées. 

                J'ai pensé à une boucle de ce style là, je parcours le tableau de 6 en 6, la boucle imbriquée devra prendre les valeurs dans ces intervalles, mais elle fait tout planter (une boucle infinie ??) je ne vois pas le problème en fait. 

                for ($i = 0 ; $i < $tabLength ; $i+6)
                		  {
                		      for ($j = 0 ; $j < 6 ; $j++ ) {
                                  echo $tabKeys[$i + $j];
                              }
                		  }





                • Partager sur Facebook
                • Partager sur Twitter
                  23 juillet 2019 à 11:25:50

                  Je suis un peu rouillé en PHP mais je trouve bizarre que tu te retrouves avec un truc linéarisé comme ça. Tu devrais avoir des outils pour te retrouver avec un array associatif ou un objet quand même.

                  Si non ton erreur dans la boucle est juste un problème de syntaxe : tu n'incrémentes pas $i en fait, tu fais $i + 6 à chaque itération au lieu de $i += 6 (au passage, quand j'incrémente de 1, j'écris toujours i += 1 au lieu de i++ ou ++i pour normaliser la syntaxe, mais je suis pas sectaire sur ce truc là).

                  Dernière chose : je ne te recommande pas de faire un simple split en Javascript. Passe par du JSON avec json_encode et JSON.parse. C'est pas bon d'avoir un encodage/décodage non standardisé dans tes applications parce que ça va changer tout le temps en fonction des données et tu risques de faire des erreurs.

                  -
                  Edité par tabouretBleu 23 juillet 2019 à 11:29:42

                  • Partager sur Facebook
                  • Partager sur Twitter
                    23 juillet 2019 à 12:34:16

                    Merci pour ta réponse Tabouret. 

                    Un collègue m'a expliqué mon erreur sur cette boucle et tu as raison, entre temps j'en ai construit une autre et j'ai enfin réussi à mettre à jour les données de ma base !!

                    Voici mon code final pour ceux qui passeront par là. 

                    Partie JS/Ajax dans ma vue 

                    <script type="text/javascript"> 
                    
                    		var myTable = jexcel(document.getElementById('jExcelDiv'), {
                    		data:data3
                    	});
                    	
                    	$(function(){
                    		$('#saveButton').click(function(){
                    		
                    			$.ajax({
                    				type :'POST',
                    				url: "{{ path('oc_advert_save') }}",
                    				data:  myTable.getData(),  
                                    async: true, 
                                    processData: false,
                                    cache: false,
                    				
                    				success: function (data) {
                                        consoleMsg.innerHTML = 'Data saved';
                    					console.log(data) ; 
                    					
                                    },
                    				
                    				error: function (xhr) {
                                        consoleMsg.innerHTML = 'Error when saving';
                    					console.log(xhr) ; 
                                        
                                    },
                    			});
                    		});
                    	});
                    	</script>
                    

                    Dans mon controleur 

                    /**
                    		* @Route("/save", name="oc_advert_save")
                    	*/
                    	
                    	public function saveData()
                    	{
                    		
                    		   //Je prends toutes les clé de POST
                    		   $key = array_keys($_POST) ;
                    			
                    		   //J'éclate le tableau en string 
                    		   $stringKeys = implode("," , $key); 
                    		   
                    		   //Je remet la string en tableau (ne marche pas si on fait $key[index] ...??)
                    		   $tabKeys = explode(",",$stringKeys) ; 
                    		   
                    		 //La longueur du tableau
                    		  $length = count($tabKeys) ; 
                    		
                    		
                    		  //Création de deux nouveaux tableaux, pour construire un tableau de tableau
                    		  
                    		  $organizedArray = array() ; 
                    		  
                    		  $dataRow =  array() ; 
                    		  $counter = 0 ; 
                    
                    		  
                    		  for ($i = 0 ; $i <$length; $i++)
                    		  {
                    			 //6 car 6 colonnes dans mon tableau
                    			 if($counter == 6)
                    			 {
                    				 $counter = 0 ; 
                    				 array_push($organizedArray, $dataRow) ; 
                    				 $dataRow = array() ;  
                    			 }
                    			 
                    			array_push($dataRow, $tabKeys[$i]);
                    			$counter++ ;	 
                    		  }
                    		  
                    		  //on push la dernière ligne qui n'est pas prise en compte dans la boucle
                    		  array_push($organizedArray, $dataRow) ; 
                    		  
                    		  //on dépile le nom des colonnes, on en a pas spécialement besoin
                    		  array_shift($organizedArray) ; 
                    		  
                    		  print_r($organizedArray) ; 
                    
                    	
                    		  $finalLength = count($organizedArray) ; 
                    		  
                    		  $em = $this->getDoctrine()->getManager() ; 
                    		  
                    		  for($j = 0 ; $j <$finalLength ; $j++)
                    		  {
                    			
                    			 $advert = $em->getRepository('OCPlatformBundle:Advert')->find($organizedArray[$j][0]) ;  
                    			 
                    			 $advert->setTitle($organizedArray[$j][2]) ; 
                    			 $advert->setAuthor($organizedArray[$j][3]) ; 
                    			 $advert->setContent($organizedArray[$j][4]) ; 
                    			 $advert->updateDate() ; 
                    			 $advert->setSlug($organizedArray[$j][5]) ; 
                    			 
                    			 $em->persist($advert);
                    		  }
                    		  
                    		   $em->flush() ; 
                    		  
                    		  return new Response("Vos modifications sont enregistrées") ;
                    
                    	  
                    	}

                    Je considère ce sujet comme résolu, j'ai réussi ce que je voulais faire, je vais maintenant essayer en utilisant du JSON comme recommandé. C'était mon plan à la base, mais rien ne s'est passé comme prévu o_O

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Tableau JExcel et Ajax POST

                    × 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