Récupérer tous les valeurs d'une boucle avec xhr.response

Version imprimable

bonjour
je ne vois pas comment récupérer tous les valeurs...j'ai uniquement que la dernière valeur de la boucle.

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
37
38
function previpanier() {
 
				let idart = <?php echo $idan; ?>;
 
				let xhr = getXhr();
				xhr.responseType = 'json';
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						let errMsg = xhr.response.erreurMsg;
						let article = xhr.response.article;
						let quanti = xhr.response.quanti;
						let foto = xhr.response.foto;
 
						if(errMsg !== undefined && errMsg !== ''){
							document.getElementById('erreur').innerHTML = errMsg;
						}
						if(article !== undefined && article !== ''){
							document.getElementById('panArt').innerHTML = article;
						}
						if(quanti !== undefined && quanti !== ''){
							document.getElementById('panQuant').innerHTML = quanti;
						}
						if(foto !== undefined && foto !== ''){
							document.getElementById('vispanier').style.display='block';
							document.getElementById('panFoto').innerHTML = foto;
						}
						}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","anonc/previpanier.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				xhr.send("idan="+idart);
}

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
31
if (isset($_POST['idan']) AND is_numeric($_POST['idan'])) 
{
 
$data=[]; 	
 
$baspani = $bdd->prepare("SELECT article, quanti, foto FROM panier WHERE ip = :ip");
	$baspani->execute(array(
	'ip'=> $ip
    ));
 
if ( $elements = $baspani->fetchAll()){
    foreach( $elements as $element ) {	
 $article = $element['article'];
 $quanti = $element['quanti'];
 $foto = $element['foto'];
 
 $data["article"]= $article;
 $data["quanti"]= $quanti;
 if(!empty($foto)){
	$data["foto"]= $foto; 
 }
} 
}
}
else {
	$erre = "Problème d'identification du produit";
	$data["erreurMsg"]= $erre;
}
 
echo json_encode($data);
?>

11/09/2023, 19h33
NoSmoking
Bonjour,
pour commencer je dirais qu'il faudrait que tu penses à indenter correctement ton code, ce n'est pas un cadeau à lire :aie:

Pour continuer je dirais que devrais peut-être passer à l'API Fetch, mais cela n'est pas primordiale ;)

Pour finir, tu as un soucis avec ton PHP, lorsque tu écris :

Code:

$data["article"]= $article;

qui revient à écrire :

Code:

$data["article" ]= $element['article'];

tu réaffectes la valeur de $data["article"] mais tu ajoutes rien.

Pour stocker sous forme d'un tableau il te faudrait faire par exemple :
Code:

1 2 3 4 5 6 <?php $data = []; $data["article"][]= "Un"; $data["article"][]= "Deux"; $data["article"][]= "Trois"; print_r($data);
à comparer avec :
Code:

1 2 3 4 5 6 <?php $data = []; $data["article"] = "Un"; $data["article"] = "Deux"; $data["article"] = "Trois"; print_r($data);
... dans ce cas il n'y a pas les accolades.

Dernier point, je trouve dommage de tronquer le nom des variables, quantite et quand même plus parlant que quanti.
12/09/2023, 03h13
Toufik83

Bonjour,

Tout a été expliqué par NoSmoking, j'ajoutes seulement que tu peux stocker le résultat de la requête directement dans le tableau $data["articleElements"] puisque fetchAll() retourne déjà un tableau, et donc tu n'as pas à le faire manuellement avec la boucle...

Code:

if ( $elements = $baspani->fetchAll()) $data["articleElements"]=$elements;

Au niveau JS, tu reçois un tableau d'objets récupérable via xhr.response.articleElements que tu peux ensuite le parcourir avec une boucle forEach ou map ou autres...

1 pièce(s) jointe(s)

merci pour toutes ses infos.
je ne savais pas pour le fetchAll() qui retourne un tableau.
au niveau js parcontre jamais fait de boucle... en regardant sur le net et essayer ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 let lesElements = xhr.response.articleElements; console.log(lesElements); for (let prop in lesElements) { console.log("${prop} : ${lesElements[prop]}"); document.getElementById('panArt').innerHTML = lesElements; }; Object.keys(lesElements).forEach(function(prop){ console.log(`${prop} : ${lesElements[prop]}`); document.getElementById('panArt').innerHTML = lesElements; }); function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } lesElements.forEach(logArrayElements);
mais ça m'indique:
0 : [object Object]
1 : [object Object]
2 : [object Object]

dans la console.log lesElements
Array(3) [ {…}, {…}, {…} ]

php

Code:

if ( $elements = $baspani->fetchAll()) $data["articleElements"]=$elements;

en faisant un print_r($data); il m'affiche bien dans le tableau

Pièce jointe 643795

@Toufik83 :
tout à fait ;)

@maxtrident :

Citation:

dans la console.log lesElements
Array(3) [ {…}, {…}, {…} ]

tu es en présence d'un tableau il te faut donc parcourir ce tableau et pour chaque enregistrement boucler sur les propriétés de l'objet parcouru.

Plusieurs façons de faire, sur base de cette réponse adaptée, en voici deux :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 const datas = [{ "article": "Un", "quantite": 1, "photo": "image_01.jpg" }, { "article": "Deux", "quantite": 2, "photo": "image_02.jpg" }, { "article": "Trois", "quantite": 3, "photo": "image_03.jpg" }];
les console.log sont là pour visualiser chaque lignes, à remplacer pour construire le code HTML.
Code:

1 2 3 4 5 6 datas.forEach((data, ind) => { console.log(`(${ind +1}) ---`) for (let prop in data) { console.log(`${prop} : ${data[prop]}`); }; });
perso je lui préfère :
Code:

1 2 3 4 5 6 datas.forEach((data, ind) => { console.log(`(${ind +1}) ---`) for (const [key, value] of Object.entries(data)) { console.log(`${key} : ${value}`); } });
et à partir de là tu devrais t'en sortir pour construire ton code HTML et l'injecter en sortant de la boucle forEach.

12/09/2023, 21h32
maxtrident

si j'ai bien compris il y a 2 boucles... le forEach pour choisir les lignes du tableau et le for pour dire ce qui a dedans.
un exemple pour construire le code HTML et l'injecter en sortant de la boucle ?
les exemples que je trouve c'est toujours avec le console.log
je voudrais avoir des lignes avec photo, article, quantité.

Citation:

si j'ai bien compris il y a 2 boucles... le forEach pour choisir les lignes du tableau et le for pour dire ce qui a dedans.

Exactement, mais dans ton cas il n'est pas besoin de parcourir les clés de l'objet attendu que tu sais ce que tu reçois.

Il te faut juste construire ton code HTML et ce fonction de la structure que tu souhaites.

Voici une exemple de construction et d'injection d'une réponse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// array de stockage du HTML
const html = [];
// parcours des données reçues
datas.forEach((data) => {
  // utilisaton des « template string »
  html.push(`
    <figure class="info-group">
      <img class="info-photo" src="${data.photo}" alt="">
      <figcaption>
        <h2 class="info-article">${data.article}</h2>
        <p>Quantité : <span class="info-quantite">${data.quantite}</span></p>
      </figcaption>
    </figure>
  `);
});
// récup. élément destination
const elem = document.getElementById("resultat");
// nettoyage destination
elem.textContent = "";
// injection HTML
elem.insertAdjacentHTML("beforeend", html.join(""));

avec les données, que j'ai fournies plus haut, tu devrais obtenir :

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
<div id="resultat">
    <figure class="info-group">
      <img class="info-photo" src="image_01.jpg" alt="">
      <figcaption>
        <h2 class="info-article">Un</h2>
        <p>Quantité : <span class="info-quantite">1</span></p>
      </figcaption>
    </figure>
 
    <figure class="info-group">
      <img class="info-photo" src="image_02.jpg" alt="">
      <figcaption>
        <h2 class="info-article">Deux</h2>
        <p>Quantité : <span class="info-quantite">2</span></p>
      </figcaption>
    </figure>
 
    <figure class="info-group">
      <img class="info-photo" src="image_03.jpg" alt="">
      <figcaption>
        <h2 class="info-article">Trois</h2>
        <p>Quantité : <span class="info-quantite">3</span></p>
      </figcaption>
    </figure>
  </div>

Il ne reste plus qu'à adapter le CSS et ce avec les classes misent en place.

13/09/2023, 18h10
maxtrident

merci