IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

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


Sujet :

AJAX

  1. #1
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut Récupérer tous les valeurs d'une boucle avec xhr.response
    bonjour
    je ne vois pas comment récupérer tous les valeurs...j'ai uniquement que la dernière valeur de la boucle.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    ?>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 187
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 187
    Par défaut
    Bonjour,
    pour commencer je dirais qu'il faudrait que tu penses à indenter correctement ton code, ce n'est pas un cadeau à lire

    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    $data["article"]= $article;
    qui revient à écrire :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    $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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <?php
    $data = [];
    $data["article"][]= "Un";
    $data["article"][]= "Deux";
    $data["article"][]= "Trois";
    print_r($data);
    à comparer avec :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 493
    Par défaut
    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 php : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  4. #4
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    if ( $elements = $baspani->fetchAll()) $data["articleElements"]=$elements;
    en faisant un print_r($data); il m'affiche bien dans le tableau

    Nom : Capture d'écran_20230912_180744.png
Affichages : 241
Taille : 143,4 Ko

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 187
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 187
    Par défaut
    @Toufik83 :
    tout à fait

    @maxtrident :
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  6. #6
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut
    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é.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 187
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 187
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  8. #8
    Membre confirmé
    Homme Profil pro
    Pour le plaisir
    Inscrit en
    Novembre 2012
    Messages
    178
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Pour le plaisir
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Novembre 2012
    Messages : 178
    Par défaut
    merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. récupérer toutes les valeurs dans une boucle
    Par herveD dans le forum Langage
    Réponses: 5
    Dernier message: 27/07/2023, 22h29
  2. [MySQL] impossible de récupérer les valeurs d'une table avec une requête préparée
    Par cfloriot dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 09/04/2016, 18h05
  3. Réponses: 2
    Dernier message: 09/04/2015, 22h28
  4. Réponses: 2
    Dernier message: 08/09/2014, 08h41
  5. Afficher tous les champs d'une table avec dbexpress et MySQL
    Par LHT dans le forum Bases de données
    Réponses: 2
    Dernier message: 25/06/2004, 18h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo