AJAX JSON Affichage requete dans une boucle

Version imprimable

Bonjour à tous,

Ça fais un bail que je n'ai pas codé et mon regard se perd dans les méandres du langage ...
Du coup ma question est simple, j'essaie d'afficher des sous categories via un encodage Json de mes requetes catégories et sous catégories.
Les catégories, elles, s'affichent bien mais pas mes sous catégories.
Comment ecrire ma boucle en AJAX qui me permettra de lister mes sous catégorie dans mon conteneur HTML ?

Voici ma requête, cherchercategorieSelection.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$categoriesId=$_POST['categoriesId'];
 
$result=$connect->query(
	'SELECT categories_id, categories_nom, categories_active, categories_statut '.
	'FROM categories '.
	'WHERE categories_id='.$categoriesId);
 
if($result->num_rows>0)
	{
	$row=$result->fetch_array(MYSQLI_ASSOC);
	$result=$connect->query(
		'SELECT souscategories_id, souscategories_nom '.
		'FROM souscategories '.
		'WHERE categories_id='.$categoriesId);
	$row['souscategories']=$result->fetch_all(MYSQLI_ASSOC);
 
	echo json_encode($row);
	}

Ma page categorie.php ou je dois faire l'affichage de mes sous-categories

Code:

1
2
3
4
5
6
7
	<div class="form-group">
		        	<label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editSousCategoriesName" placeholder="Nom de la Sous-catégorie" name="editSousCategoriesName" autocomplete="off">
					    </div>
		        </div>

et mon categorie.js qui est appelait à la fin de ma page categorie.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
32
33
		$.ajax({
			url: 'php_action/chercherCategorieSelection.php',
			type: 'post',
			data: {categoriesId: categoriesId},
			dataType: 'json',
			success:function(response) {
 
				// modal spinner
				$('.modal-loading').addClass('div-hide');
				// modal result
				$('.edit-categories-result').removeClass('div-hide');
				//modal footer
				$(".editCategoriesFooter").removeClass('div-hide');	
				// set the categories name
				$("#editCategoriesName").val(response.categories_nom);
 
 
				$("#editSousCategoriesId").val(response.souscategories_id);
 
 
 
                var sscat = (response['souscategories']['souscategories_nom']);
   				$("#editSousCategoriesName").innerHTML = +sscat;   			
   				//document.getElementById("editSousCategoriesName").innerHTML = +sscat;
 
/*   
 
while(++i<ar_.length)
{
	st_html+="<div>"+ar_[i]+"</div>";
}
            }
*/

10/03/2018, 19h59
psychadelic

heu, j'ai toujours un problème pour te comprendre...

tu veux faire quoi exactement ?
A = faire UNE SEULE requête ajax puis réaliser une boucle pour afficher les différentes "lignes" renvoyées par ta requette Ajax

ou

B =faire UNE SUITE de requêtes Ajax à exécuter en boucle et qui te renvoient chacune une seule ligne à ajouter à ton affichage ?

alors A ou B ????

PS: au passage en jQuery la méthode est
$("#editSousCategoriesName").HTML(sscat);
et non
~~$("#editSousCategoriesName").innerHTML = +sscat;~~

=> http://api.jquery.com/html/

sinon si tu veux ajouter des élément les un à la suites des autres ilf faut utiliser une méthode append => http://api.jquery.com/append/

Je sais que l'on a du mal à se comprendre toi et moi mais en gros voilà le resultat Json de ma requête :

Code:

1
2
3
	$row['souscategories']=$result->fetch_all(MYSQLI_ASSOC);
 
	echo json_encode($row);

Comment formuler ma boucle javascript ?

Code:

1
2
   var sscat = (response['souscategories']['souscategories_nom']);
   				$("#editSousCategoriesName").HTML(sscat); // Ce resultat ne m'affiche rien

pour arriver grossièrement à ce résultat dans ma categorie.php !?

Code:

1
2
3
4
5
6
7
8
9
<td>
  <input type="text" class="form-control" id="editSousCategoriesName[1]" placeholder="Nom de la Sous-catégorie1" name="editSousCategoriesName[1]">
</td>					
<td>
  <input type="text" class="form-control" id="editSousCategoriesName[2]" placeholder="Nom de la Sous-catégorie2" name="editSousCategoriesName[2]">
</td>					
<td>
...
</td>

C'est bizarre de répondre à ma question par une question, me répondre A ou B aurait été simple ?

Donc je prend l’hypothèse A, une seule requête ajax retournant ton tableau de données.

Le truc c'est que je ne vois pas trop ce qu'il y a dans ce tableau, est-ce que tu pourrais donner ici une copie de ce contenu ?? ( ça m'aiderai à te répondre, et j'ai perdu l'habitude avec le SQL )

il suffi juste de rajouter cette ligne
console.log(" retour Ajax ==> response <== " + JSON.stringify( response ));
à la suite de
success:function(response) {
ce qui donnerai :
Code:

1 2 3 4 5 6 7 $.ajax({ url: 'php_action/chercherCategorieSelection.php', type: 'post', data: {categoriesId: categoriesId}, dataType: 'json', success:function(response) { console.log(" retour Ajax ==> response <== " + JSON.stringify( response ));
puis faire la copie de ce résultat issu de la console du débogueur de ton navigateur ( sur FireFox = touche F12 , puis choisir l'onglet Console ).
( les 3 ou 4 premières occurrences suffiront )

PS :
Citation:
Envoyé par karpe
mais en gros voilà le résultat JSON de ma requête :
Code:

1 2 3 4 $row['souscategories']=$result->fetch_all(MYSQLI_ASSOC); echo json_encode($row);
non, ça ce n'est pas un résultat JSON, c'est code PHP qui renvoie des données JSON, le résultat en JSON on le voit pas du tout ici... :?

11/03/2018, 11h44
karpe

1 pièce(s) jointe(s)

Bon écoutes,
Je viens sur ce forum, car je cherche de l'aide et du conseil, je viens pas ici pour me faire rabaisser par un type qui expose clairement mon manque de langage technique.
Sur tous sujets que je post, il n'y a pas une réponse de ta part ou j'ai le sentiment d’être pris pour une merde.
je ne suis pas un professionnel du développement, je te le redis et j'ai un taf à côté qui me prends déjà tout mon temps.

Tu ne sembles pas avoir les mêmes capacités de compréhension que d'autres membres de ce forum... Donc ! Tu me poses une question infantilisante, à savoir A ou B. Je te redis, que je ne suis pas professionnel du JS, et encore moins AJAX. Ce qui par conséquent induit que je ne sais pas forcément quelle méthode utilisée. Tout ce dont je peux te faire part c'est le résultat souhaité. Ce que j'ai fais. Après, le bon sens aurait voulu que tu me portes conseil sur un éventuel choix.!

Bref. Pour répondre à ta question, voici la réponse de la console. Il s'avére que les sous-catégories sont bien encodés avec l'identifiant de catégorie. Le problème est donc de retranscrire la formule magique qui permettra l'affichage/listage des sous catégories. Je te fais confiance pour reprendre derrière moi ce qui a été mal exprimé ;)

Code:

retour Ajax ==> response <== {"categories_id":"59","categories_nom":"TESTK","categories_active":"1","categories_statut":"1","souscategories":[{"souscategories_id":"75","souscategories_nom":"sousTestK1"},{"souscategories_id":"76","souscategories_nom":"sousTestK2"}]}

Le résultat visuel actuel :

Pièce jointe 359123

Dans le cas ou une quelconque suffisance recevrait mal mes propos, stp ne réponds pas à ce message et passe ton chemin.
J'ai besoin d'une solution mais ne me rabaisserai pour elle.
Merci

Heu, je ne cherche qu’a t’aider, et il n’y a aucune mauvaise intention de ma part*; tu devrai lire mes autres messages ou je réponds aussi à d’autres internautes de ce site, et tu verra bien que je ne cherche qu’a avoir des réponses constructives.

Si je t’ai posé une question en A ou B, c’est que réellement, je me pose la question de savoir si ce que tu demande est l’une ou l’autre, car elles amènent chacune à 2 réponses complètement différentes.

Passons, j’espère que la suite t’aidera; voici le système de boucle que tu recherchais:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      lignes_SousCatHTML = '<tr>';
 
      for (var i = 0; i < response.souscategories.length; i++) {
 
        lignes_SousCatHTML += '<td>';
        lignes_SousCatHTML += '<input type="text" class="form-control"';
        lignes_SousCatHTML += ' id="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' name="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
        lignes_SousCatHTML += ' />';
        lignes_SousCatHTML += '</td>';
      }
      lignes_SousCatHTML += '</tr>';
      // $tbl_SousCat.empty();
 
      $tbl_SousCat.html(lignes_SousCatHTML);

J'ai même fait un mini-exemple (en reprenant les valeurs de ton log précédent):

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>test retour json</title>
</head>
<body>
  <h3>test retour json</h3>
  <table id="editSousCategoriesName"><tr><td>...</td></tr></table>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
 
    $(document).ready(function(){ 
      var
        $tbl_SousCat = $('#editSousCategoriesName'),
        lignes_SousCatHTML = "",
        response = {
          "categories_id":"59",
          "categories_nom":"TESTK",
          "categories_active":"1",
          "categories_statut":"1",
          "souscategories":
            [
              {"souscategories_id":"75","souscategories_nom":"sousTestK1"},
              {"souscategories_id":"76","souscategories_nom":"sousTestK2"}
            ]
        }
      ;
 
      lignes_SousCatHTML = '<tr>';
 
      for (var i = 0; i < response.souscategories.length; i++) {
 
        lignes_SousCatHTML += '<td>';
        lignes_SousCatHTML += '<input type="text" class="form-control"';
        lignes_SousCatHTML += ' id="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' name="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
        lignes_SousCatHTML += ' />';
        lignes_SousCatHTML += '</td>';
      }
      lignes_SousCatHTML += '</tr>';
 
      // $tbl_SousCat.empty();
 
      $tbl_SousCat.html(lignes_SousCatHTML);
 
    });
  </script>
</body>
</html>

1 pièce(s) jointe(s)

Bonjour Psychadelic,

Ravi que l'on finisse par ce somprendre. d'autant que pour le coup, tu m'as bien aidé.
Les données s'affichent désormais comme je le souhaitais.
Pièce jointe 359155

J'aimerais désormais que les label de mes sous-categorie s'incrémente d'elle même.
Du genre :
- sous-catégorie 1 :
- sous categorie 2 :
- ...
J'ai testé l'incrémentation en PHP avec <?php echo $x; ?> mais sans résultat...
Cela me servira également je pense pour supprimer la ligne au clic sur l'icone poubelle (qui pour le moment n'est pas actif).
D'ailleurs je pense que je devrais mettre un message lors du clic pour eviter la suppression hasardeuse qui pourrait avoir des repercutions sur l'affichage de mes produits...
N'hesites pas à me faire part de tes suggestion.

Je laisse mon code categorie.php

Code:

1
2
 
		      		<div id="AffSSCat" name="AffSSCat"></div>

Et mon categorie.js

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
39
$.ajax({
			url: 'php_action/chercherCategorieSelection.php',
			type: 'post',
			data: {categoriesId: categoriesId},
			dataType: 'json',
			success:function(response) {
 
// console.log(" retour Ajax ==> response <== " + JSON.stringify( response )); 
// console.log(" categories =  " + response.categories_nom); 
// console.log(" souscategories =  " + response.souscategories[0].souscategories_nom); //LOGOK
 
 
// BOUCLE SUR LA SOUS CATEGORIE//
 
				var $souscategoriesName = $("#AffSSCat");
      				lignes_AffSSCat = "";
 
					for (var i = 0; i < response.souscategories.length; i++) {
 
						  lignes_AffSSCat += '<div class="form-group">';
						  lignes_AffSSCat += '<label for="fff" class="col-sm-4 control-label">Sous-catégorie</label>';
						  lignes_AffSSCat += '<label class="col-sm-1 control-label">: </label>';
						  lignes_AffSSCat += '<div class="col-sm-6">';
						  lignes_AffSSCat += '<input type="text" class="form-control"';
						  lignes_AffSSCat += ' id="'+response.souscategories[i].souscategories_id +'"';
						  lignes_AffSSCat += ' name="'+response.souscategories[i].souscategories_id +'"';
						  lignes_AffSSCat += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
						  lignes_AffSSCat += ' value="'+response.souscategories[i].souscategories_nom +'"';
						  lignes_AffSSCat += ' />';
						  lignes_AffSSCat += '</div>';
						  lignes_AffSSCat += '<div class="col-sm-1">';
						  lignes_AffSSCat += '<button class="btn btn-default removeProductRowBtn" type="button" id="removeProductRowBtn" onclick="removeProductRow(<?php echo $x; ?>)"><i class="glyphicon glyphicon-trash"></i></button>';
						  lignes_AffSSCat += '</div>';
						  lignes_AffSSCat += '</div><!-- /form-group-->';
					}		
 
				$souscategoriesName.html(lignes_AffSSCat);
 
// FIN BOUCLE SUR LA SOUS CATEGORIE//

simple ;)

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
 
    for (var i = 0; i < response.souscategories.length; i++) {
 
        lignes_AffSSCat += '<div class="form-group">';
        lignes_AffSSCat += '<label for="'+response.souscategories[i].souscategories_id +'"';
        lignes_AffSSCat +=   ' class="col-sm-4 control-label">Sous-catégorie '+ (i+1).toString() +'</label>';
        lignes_AffSSCat += '<label class="col-sm-1 control-label">: </label>';
        lignes_AffSSCat += '<div class="col-sm-6">';
        lignes_AffSSCat += '<input type="text" class="form-control"';
        lignes_AffSSCat += ' id="'+response.souscategories[i].souscategories_id +'"';
        lignes_AffSSCat += ' name="'+response.souscategories[i].souscategories_id +'"';
        lignes_AffSSCat += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
        lignes_AffSSCat += ' value="'+response.souscategories[i].souscategories_nom +'"';
        lignes_AffSSCat += ' />';
        lignes_AffSSCat += '</div>';
        lignes_AffSSCat += '<div class="col-sm-1">';
        lignes_AffSSCat += '<button class="btn btn-default removeProductRowBtn" type="button"';
        lignes_AffSSCat +=   ' id="removeProductRowBtn" onclick="removeProductRow(\''+response.souscategories[i].souscategories_id+'\')">';
        lignes_AffSSCat +=   '<i class="glyphicon glyphicon-trash"></i></button>';
        lignes_AffSSCat += '</div>';
        lignes_AffSSCat += '</div><!-- /form-group-->';
    }		
 
    $souscategoriesName.html(lignes_AffSSCat);

[edit= correction] j'avais sauté l'erreur sur label for=

11/03/2018, 20h41
karpe

Merci Psyhadelic pour le coup de pouce !