AJAX Liste les données dans une boucle

Version imprimable

Bonjour à tous,

Je bug sur un truc simple mais je ne vois pas mon erreur.
Si un oeil exercé pouvez m'éclairer.

Je souhaite lister toutes les sous catégories d'une catégorie dans un SELECT.

Du coup je fais au préalable un appel AJAX pour récupérer les données voulu depuis une requête PHP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
				$.ajax({
		url: 'php_action/chercherListeSousCategorieN1.php',
		type: 'post',
		data: {productId: productId},
		dataType: 'json',
		success:function(response) {	
 
var $testSSCATN1 = $("#edittestSSCATN1");
 
lignes_AffSSCatN1 = '<select>';	
lignes_AffSSCatN1 += '<option value="-1">~~Aucune~~</option>';	
lignes_AffSSCatN1 += '<option value="'+response.souscategories_id+'">'+response.souscategories_nom+'</option>';	
 
 
///MA boucle qui merde
 
					for (var i = 0; i < response.souscategories.length; i++) {	
lignes_AffSSCatN1 += '<option value="'+response.souscategories[i].souscategories_id  +'">'+response.souscategories[i].souscategories_nom +'</option>';	
						} 
 
// FIN de ma boucle qui merde
 
 
lignes_AffSSCatN1 += '</select>';
 
				$testSSCATN1.html(lignes_AffSSCatN1);	
 
 
					} // /success function
				});

Ma requête PHP "ChercherListeSousCategorieN1.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php 	
 
require_once 'core.php';
 
$productId = $_POST['productId'];
 
$sql = "SELECT produits.produit_id, produits.categories_id, produits.souscategoriesN1_id, souscategories.souscategories_nom, souscategories.souscategories_id FROM produits 
		INNER JOIN souscategories ON produits.categories_id = souscategories.categories_id  
		WHERE produit_id = $productId";
		$result = $connect->query($sql);
 
if($result->num_rows > 0) { 
 $row = $result->fetch_array();
} // if num_rows
 
$connect->close();
 
echo json_encode($row);

Pour enfin effectuer l'affichage dans une DIV :

Code:

1
2
 
				    <div class="col-sm-8" id="edittestSSCATN1"></div>

J'arrive à communiquer et récupérer une valeur en test que j'affiche dans "edittestSSCATN1" mais dès que j'essai d'effctuer la boucle, je n'ai aucun affichage de données. Je ne vois pas ce qui clôche dans ma boucle FOR.
Qu'elqu'un saurait-il m'aiguiller ?

D'avance merci

Bonsoir !

Ton traitement ajax semble attendre une structure ressemblant à ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 { "souscategories_id": ... , "souscategories_nom": ... , "souscategories": [ { // 0 "souscategories_id": ... , "souscategories_nom": ... , }, { // 1 "souscategories_id": ... , "souscategories_nom": ... , }, { // 2 "souscategories_id": ... , "souscategories_nom": ... , }, etc. ] }
Or, ton script PHP renvoie au maximum une ligne de résultat de requête SQL. En effet, il n’y pas de boucle, ni while ni for dans ton code, donc fetch_array est appelé au plus une fois. Ainsi, la structure produite par ton serveur ressemble à ça :
Code:

1 2 3 4 5 6 7 { "produit_id": ... , "categories_id": ... , "souscategoriesN1_id": ... , "souscategories_nom": ..., "souscategories_id": ... }
Pas de tableau JSON ici, seulement un objet avec 5 clés. Aucune clé ne s’appelle souscategories, et aucune chance que souscategories.length soit définie. Même si souscategories existait, ce ne serait pas un tableau et n’aurait donc pas de propriété length.

Attention à la différence entre objet et tableau en JSON :

un objet s’écrit avec les accolades { } et a des clés de type string
un tableau s’écrit avec les crochets [ ] et on n’écrit pas ses clés ; implicitement, ses entrées son numérotées avec des nombres entiers positifs en commençant par zéro.

Comme il est indiqué dans la doc de json_encode (section notes), si un tableau de PHP contient des clés non numériques, ou qui ne se suivent pas, ou qui ne commencent pas par zéro, il ne peut pas être converti en tableau JSON et sera donc converti en objet.

Citation:

Envoyé par karpe

dès que j'essai d'effctuer la boucle, je n'ai aucun affichage de données.

C’est probablement que le script s’est arrêté à cause d’une erreur. Pour voir les messages d’erreur, appuie sur F12 et sélectionne l’onglet console. Le panneau F12 te permet également de voir les requêtes ajax dans l’onglet réseau, et d’examiner directement le contenu JSON reçu.

Autre chose : tu as une très belle vulnérabilité SQL :mrgreen: Une donnée qui provient du client ($_POST['productId']) est utilisée directement dans une requête SQL. Mais bien sûr, tu vas corriger ça rapidement, hein ? ;)

17/04/2018, 19h36
karpe

Merci pour ce retour Watilin !

Si j'ai bien compris ma requête PHP n'est pas adapté au résultat souhaité.
Je vais investiguer du côté de tes suggestions.

Concernant ma vulnérabilité SQl

Citation:

($_POST['productId'])

... Du coup ...comment devrais-je l'écrire ??

Je récupère cette fois-ci bien la clé

Citation:

souscategoriesN1

dans ma requête

Citation:

chercherListeSousCategorieN1.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 require_once 'core.php'; $productId = $_POST['productId']; $sql = "SELECT produits.produit_id, produits.categories_id, produits.souscategoriesN1_id, souscategories.souscategories_nom, souscategories.souscategories_id FROM produits INNER JOIN souscategories ON produits.categories_id = souscategories.categories_id WHERE produit_id = $productId"; $result = $connect->query($sql); if($result->num_rows > 0) { $row['souscategoriesN1'] = $result->fetch_array(); } // if num_rows $connect->close(); echo json_encode($row);
Je génère cette foi-ci en effet une ligne correspondant à une des sous-catégories...mais seulement une ...
Je suis pas très calé en développement et n'est pas toujours le langage adapté. (Je viens de commander un bouquin JAVASCRIPT :))
Je suis dans une page de modification de mes fiches articles.
La finalité que je souhaite est tout simplement de lister toutes les sous-catégories de ma catégorie dans un SELECT.
La liste des sous-catégories se modifie en fonction de la donnée selectionner dans la première liste de catégorie. Celà fonctionne très bien d'ailleurs.
Le problème est donc de charger la liste des sous-catégories automatiquement lorsque l'on arrive sur la page de modification.

Saurais-tu m'aider à écrire cette boucle ?
Code:

1 2 3 for (var i = 0; i < response.souscategoriesN1; i++) { lignes_AffSSCatN1 += '<option value="'+response.souscategoriesN1[i].souscategories_id +'">'+response.souscategoriesN1[i].souscategories_nom +'</option>'; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 $.ajax({ url: 'php_action/chercherListeSousCategorieN1.php', type: 'post', data: {productId: productId}, dataType: 'json', success:function(response) { var $testSSCATN1 = $("#edittestSSCATN1"); lignes_AffSSCatN1 = '<select>'; lignes_AffSSCatN1 += '<option value="-1">~~Aucune~~</option>'; lignes_AffSSCatN1 += '<option value="'+response.souscategoriesN1.souscategories_id+'">'+response.souscategoriesN1.souscategories_nom+'</option>'; //Affichage de cette ligne OK ///DEBUT BOUCLE for (var i = 0; i < response.souscategoriesN1; i++) { lignes_AffSSCatN1 += '<option value="'+response.souscategoriesN1[i].souscategories_id +'">'+response.souscategoriesN1[i].souscategories_nom +'</option>'; } // FIN BOUCLE lignes_AffSSCatN1 += '</select>'; $testSSCATN1.html(lignes_AffSSCatN1); } // /success function });

Citation:

Envoyé par karpe

Concernant ma vulnérabilité SQl ... Du coup ...comment devrais-je l'écrire ??

D’abord, une précaution simple : je suppose que produit_id est de type int, tu peux donc déjà diminuer le risque en convertissant explicitement la valeur avec intval.

Code:

$productId = intval($_POST['productId']);

Ensuite, le réflexe à adopter : utilise une requête préparée quand c’est possible.

Code:

SELECT ... WHERE produit_id = ?

Je crois deviner que tu utilises l’API mysqli, ce sera donc mysqli::prepare. Je te donne un exemple complet plus bas.

Citation:

Envoyé par karpe

Je génère cette foi-ci en effet une ligne correspondant à une des sous-catégories...mais seulement une ...

Oui, et c’est normal : ton script PHP fait exactement ce que tu lui dis de faire.

Code:

$row['souscategoriesN1'] = $result->fetch_array();

Cette instruction peut se décomposer en trois parties :

$row[ ... ] = ... : comme la variable $row n’existe pas jusqu’alors, elle est créée. PHP détecte que tu veux l’utiliser en tant que tableau, il crée donc un tableau.
...['souscategoriesN1'] = ... : dans le tableau qui vient d’être créé, PHP ajoute un item donc la clé est 'souscategoriesN1'.
... = $result->fetch_array(); l’item de tableau reçoit la totalité de ce qui est renvoyé par fetch_array.

Si tu regardes, avec l’onglet réseau des outils F12, le contenu envoyé par ton serveur, tu verras quelque chose comme ceci :
Code:

1 2 3 4 5 6 7 8 9 { "souscategoriesN1": { "produit_id": ... , "categories_id": ... , "souscategoriesN1_id": ... , "souscategories_nom": ..., "souscategories_id": ... } }
Encore une fois, ce n’est pas la structure attendue par ton JavaScript. Mais en réalité, il faudra aussi modifier le JavaScript.

Il faut bien comprendre que MySQL est fait pour renvoyer des lignes de tables. La structure des données est imposée au départ. Je te conseille d’utiliser un outil de gestion comme PHPMyAdmin ou Adminer pour mettre au point tes requêtes SQL et te familiariser avec la forme des résultats, avant d’intégrer ça dans tes scripts PHP.

Citation:

Envoyé par karpe

Je suis pas très calé en développement et n'est pas toujours le langage adapté. (Je viens de commander un bouquin JAVASCRIPT :))

Pas de problème, on a tous été débutants un jour ;)

La force d’un développeur ne repose pas seulement sur la connaissance des langages. Maîtriser les outils est tout aussi important. En l’occurence, je pense que tu as besoin de mieux connaître tes outils, et j’insiste : use et abuse du panneau F12. Regarde ce qu’il te propose, fais des tests, explore.
Idem pour ta base de données : choisis un outil de gestion SQL et apprends à en extraire le maximum.

Citation:

Envoyé par karpe

La finalité que je souhaite est tout simplement de lister toutes les sous-catégories de ma catégorie dans un SELECT.
La liste des sous-catégories se modifie en fonction de la donnée selectionner dans la première liste de catégorie. Celà fonctionne très bien d'ailleurs.

Le problème est donc de charger la liste des sous-catégories automatiquement lorsque l'on arrive sur la page de modification.

Si j’ai bien compris, tu as plusieurs entrées dans ta table souscategories pour une seule entrée correspondante dans produits. Ainsi, le résultat de ton INNER JOIN aura plusieurs lignes.
Actuellement, ton script PHP n’extrait que la première ligne du résultat. La solution est d’écrire une boucle pour extraire toutes les lignes.

En réalité ton script client n’a besoin que de deux informations pour chaque sous-catégorie : son nom et son id. On peut donc simplifier la requête :
Code:

1 2 3 4 5 6 SELECT souscategories.souscategories_nom, souscategories.souscategories_id FROM produits INNER JOIN souscategories ON produits.categories_id = souscategories.categories_id WHERE produits.produit_id = ?
Après ça il faut écrire le code pour préparer la requête et extraire les données.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <?php require_once 'core.php'; $productId = intval($_POST['productId']); $sql = 'SELECT souscategories.souscategories_nom, souscategories.souscategories_id FROM produits INNER JOIN souscategories ON produits.categories_id = souscategories.categories_id WHERE produits.produit_id = ?'; $stmt = $connect->prepare($sql); $stmt->bind_param('i', $productId); // 'i' pour type int $stmt->execute(); // déclare les variables qui recevront les valeurs à chaque tour de boucle $stmt->bind_result($souscategories_nom, $souscategories_id); // crée le tableau qui sera renvoyé $tableau = []; // quand fetch renvoie null, ça veut dire qu’il n’y a plus de données while ($stmt->fetch() !== null) { $tableau[] = [ 'souscategories_nom' => $souscategories_nom, 'souscategories_id' => $souscategories_id ]; } // if num_rows $connect->close(); echo json_encode($tableau);
Voir les docs :

prepare
bind_param
bind_result
fetch

Si j’avais eu le choix j’aurais opté pour PDO ; je n’aime pas trop mysqli, je trouve qu’il fait trop de « magie ». La liaison de variables avec bind_result, ce n’est pas ce qu’il y a de plus intuitif à mon avis. Mais je respecte ton choix de départ, je ne vais pas t’obliger à changer d’API.

(Note pour ceux qui connaissent : je n’utilise pas get_result car je connais au moins un environnement où cette fonction n’existe pas, parce que le pilote natif mysqlind n’est pas installé. Il s’agit d’un hébergement mutualisé chez OVH.)

Citation:

Envoyé par karpe

Saurais-tu m'aider à écrire cette boucle ?

En fait il faut retravailler la fonction entière, mais ne t’intquiète pas, je vais t’aider.

Pour commencer, je vais remplacer la construction de chaînes HTML par des méthodes jQuery.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var $testSSCATN1 = $("#edittestSSCATN1"); //lignes_AffSSCatN1 = '<select>'; var $select = $('<select>'); // lignes_AffSSCatN1 += '<option value="-1">~~Aucune~~</option>'; $('<option>') .val('-1') .text('~~Aucune~~') .appendTo($select); // ... // lignes_AffSSCatN1 += '</select>'; // $testSSCATN1.html(lignes_AffSSCatN1); $testSSCATN1.append($select);
Ça rend le code plus lisible et les erreurs plus faciles à déceler. En effet, une erreur dans du code HTML n’est pas fatale, et la représentation DOM produite risque de ne pas correspondre à ce que tu attends. C’est une situation difficile à détecter, qui peut faire perdre beaucoup de temps.

Pour écrire la boucle, il faut examiner le résultat renvoyé par ton serveur. À présent, les données se présentent sous cette forme :
Code:

1 2 3 4 5 6 7 8 9 10 11 [ { "souscategories_id": ... , "souscategories_nom": ... , }, { "souscategories_id": ... , "souscategories_nom": ... , }, // etc. ]
On a un tableau qui contient des objets ayant chacun deux clés. Cette fois on s’est assurés d’avoir un vrai tableau JSON, il a donc une propriété length qu’on va pouvoir utiliser pour faire une boucle.
Code:

1 2 3 4 5 6 for (let i = 0; i < response.length; i++) { $('<option>') .val(response[i].souscategories_id) .text(response[i].souscategories_nom) .appendTo($select); }
Avec ça tu as tout ce qu’il faut. Je te laisse remettre les bouts de code ensemble ;)

19/04/2018, 10h16
karpe

Bonjour Watilin,

Je suis au travail et viens de m’imprégner rapidement de ta réponse.
Je comptais patienter jusqu'a ce week-end pour me replonger dans ma problématique et analyser les conseils reçus... mais devant la qualité de ta réponse je ne peux que prendre le temps de m'arrêter et te remercier !
Je me suis souvent senti dévaloriser par les réponses de mes interlocuteurs sur ce forum.
Là je dois dire que la qualité de tes conseils et explications m'encourage énormément.
Je vais commander un bouquin sur PDO (j'suis adepte du format papier). Je suis preneur de conseil de lecture en PHP et JS ;)

Grand merci WATILIN !
19/04/2018, 10h29
karpe

Problème résolu !
Vraiment merci Watilin pour ta pédagogie et la qualité de tes explications !
19/04/2018, 10h45
karpe

1 pièce(s) jointe(s)

Aie,

Par contre dès que je ferme une fiche article sans la modifier et que j'en ouvre une autre, il doit y avoir à nouveau un appel à la fonction.
Le résultat et que ma liste de sous-catégories se multiplie à chaque fois que je change de produit.

Dans mon exemple ci-dessous, j'ai fermé 3 fiche article sans les modifier. Résultat, j'ai un triplon de liste déroulante.
Existe t-il une solution afin de stopper la fonction une fois qu'elle a été utilisée ? ou un autre mode que je devrais investiguer ?

Pièce jointe 371416
19/04/2018, 13h36
Watilin
C’est simple, il suffit de vider le conteneur avant d’insérer le <select>.

À la fin de la fonction success :
Code:

1 2 $testSSCATN1.empty(); $testSSCATN1.append($select);
Tu peux même « chaîner » les appels :

Code:

$testSSCATN1.empty().append($select);

Je n’ai pas mis les docs dans mon précédent message, je les mets ici :

Merci Watilin,

J'ai bien regarder la doc du .empty.
Je vide le conteneur $AffSSCATN1 avant l'insertion du select.
Cependant si je ferme la fiche sans l'enregistrer pour en modifier une autre, la liste de sous-catégorie se duplique à nouveau.
Je précise que je ne recharge pas la page.
Vois-tu l'erreur ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
				$.ajax({
		url: 'php_action/chercherListeSousCategorieN1.php',
		type: 'post',
		data: {productId: productId},
		dataType: 'json',
		success:function(response) {	
 
 
 
		var $AffSSCATN1 = $("#editsousCategorieN1");
 
 
		var $select = $('<select class="form-control" id="editsousCategorieNameN1" name="editsousCategorieNameN1">');
 
		$('<option>')
  			.val('-1')
  			.text('~~Aucune~~')
  			.appendTo($select);
 
			for (let i = 0; i < response.length; i++) {
  				$('<option>')
    			.val(response[i].souscategories_id)
 			   .text(response[i].souscategories_nom)
 			   .appendTo($select);
				}
 
						if(response.success == true) {
 
$AffSSCATN1.empty(); // vider le conteneur 
$AffSSCATN1.append($select); // Insertion du select		
 
						}
 
					} 
 
				});

20/04/2018, 12h57
Watilin

Il y a probablement un autre .empty à rajouter dans le code qui ouvre la fiche.

Bonjour,
es tu sûr de passer dans cette condition
Code:

1 2 3 4 if(response.success == true) { $AffSSCATN1.empty(); // vider le conteneur $AffSSCATN1.append($select); // Insertion du select }
et pourquoi ne pas vider le <select> en début de fonction ?

Merci à vous deux.
Allez savoir pourquoi, ce qui ne fonctionnait pas hier fonctionne aujourd'hui.
Plus de problème de duplication et ceux sur tous les navigateurs.

Juste une dérnière question avant de mettre ce poste en résolu.
Je gènére bien ma liste de sous catégorie associer à la catégorie au chargement de la fiche.
Seulement j'aimerai apposé un "selected" sur la sous-catégorie associé en base.
comment puis-je la définir ici ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	// ACTUALISER LA LISTE SOUS CATEGORIE EN FONCTION D'UNE CATEGORIE			
 
				$.ajax({
		url: 'php_action/chercherListeSousCategorieN1.php',
		type: 'post',
		data: {productId: productId},
		dataType: 'json',
		success:function(response) {	
 
			var $AffSSCATN1 = $("#editsousCategorieN1");
			var $select = $('<select class="form-control" id="editsousCategorieNameN1" name="editsousCategorieNameN1">');
 
 			$('<option>')
  				.val('-1')
  				.text('~~Aucune~~')
  				.appendTo($select);
 
			for (let i = 0; i < response.length; i++) {
  				$('<option>')
    			.val(response[i].souscategories_id)
    			.text(response[i].souscategories_nom)
    			.appendTo($select);
				}	
 
  $AffSSCATN1.empty(); // vider le conteneur 			
  $AffSSCATN1.append($select); // Insertion du select		
 
					} 
				});

24/04/2018, 11h51
NoSmoking

Citation:

Je gènére bien ma liste de sous catégorie associer à la catégorie au chargement de la fiche.

Pas sûr de tout comprendre, je dirais mets un attribut selected sur l'<option> correspondante.