Discussion :

[hack224]

Bonjour à tous,
Je viens de débuter JQuery et je cherche à remplir un tableau html avec le résultat (format json) d'une requete ajax. J'essaie avec une boucle for mais à la fin j'obtiens uniquement le dernier élément du résultat json alors que j'aurais voulu qu'il m'affiche les uns après les autres dans le tableau. Merci par avance ! Voici mon bout de code

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
var index = 0;
$(document).ready(function(){
    console.log("ready !")
    $.ajax({
            type: "GET", //rest Type
            dataType: 'json', //mispelled
            url: "http://localhost:8080/v1/log/student/blondelt",
            async: true,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                 for(var index=0; index<msg.length;index++){
                       $("#username").html(msg[index].username);
                       $("#exercise").html(msg[index].exercise);
                       $("#computer").html(msg[index].computer);
                       $("#content").html(msg[index].content);
                  }
            }
      });
 })

Et le code html du tableau

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<table class="table table-striped" id="display">
            <tr>
                <th>Username</th>
                <th>Exercise</th>
                <th>Machine</th>            
                <th>Contenu</th>
            </tr>
            <td id = "username">username</td>
            <td id = "exercise">exercise</td>
            <td id = "computer">computer</td>
            <td id = "content">content</td>
        </table>

[ABCIWEB]

Les id doivent être uniques dans une structure html...Et il manque une ballise <tr> autour de tes <td>. Il faut récréer les tableaux en javascript.
Enfin bon si c'est juste pour afficher un tableau basique c'est souvent plus facile de créer le tableau en php et de renvoyer directement du html plutôt qu'un tableau json.

[mh-cbon]

Bonjour,

deux trois petits trucs en passant.

Ton indentation est immonde, et même si le wysiwyg de dvp.com est lui même une horreur (tab de 4 espaces ? autant vomir), c'est primodial que tu fasses un effort sur ce point, pour ta propre lecture et re lecture du code, mais aussi pour toutes les autres personnes qui viendraient à le lire.

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
var index = 0;
$(document).ready(function(){
	console.log("ready !")
	$.ajax({
		type: "GET", //rest Type
    		dataType: 'json', //mispelled
    		url: "http://localhost:8080/v1/log/student/blondelt",
    		async: true,
    		contentType: "application/json; charset=utf-8",
    		success: function (msg) {
		        for(var index=0; index<msg.length;index++){
		            $("#username").html(msg[index].username);
		            $("#exercise").html(msg[index].exercise);
		            $("#computer").html(msg[index].computer);
		            $("#content").html(msg[index].content);
		        }
		}
	});
})

En javascript, il est fortement recommandé de ne pas utiliser for( ...) pour itérer sur un tableau, je te laisses le soin de chercher par toi même les mutliples raisons à cela.

On utilisera plutôt la méthode forEach de Array, à défaut, jquery fournit une alternative compatible pour tous les navigateurs, notes que la signature est légèrement différente, encore une fois je t'invites à lire les docs,

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
$(document).ready(function(){
	console.log("ready !")
	$.ajax({
		type: "GET", //rest Type
		dataType: 'json', //mispelled
		url: "http://localhost:8080/v1/log/student/blondelt",
		async: true,
		contentType: "application/json; charset=utf-8",
		success: function (msg) {
			msg.forEach(function (m/*, index*/){
			    $("#username").html(m.username);
			    $("#exercise").html(m.exercise);
			    $("#computer").html(m.computer);
			    $("#content").html(m.content);
			})
		}
	});
})

Comme sus cité, la structure de ton tableau HTML est incorrecte, Il devrait ressembler à cela :

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
<table class="table table-striped" id="display">
  <thead>
    <tr>
      <th>Username</th>
      <th>Exercise</th>
      <th>Machine</th>            
      <th>Contenu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id = "username">username</td>
      <td id = "exercise">exercise</td>
      <td id = "computer">computer</td>
      <td id = "content">content</td>
    </tr>
  </tbody>
</table>

Pour afficher tous les éléments de `msg`, il te faut :
- créer une ligne `tr` de tableau par élément dans `msg`,
- construire les cellules de cette ligne avec les valeurs textes que tu souhaites y afficher,
- et finalement, ajouter celle nouvelle ligne au tableau HTML existant.

Donc la boucle sur msg doit être ré écrite,

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
$(document).ready(function(){
	console.log("ready !")
	$.ajax({
		type: "GET", //rest Type
		dataType: 'json', //mispelled
		url: "http://localhost:8080/v1/log/student/blondelt",
		async: true,
		contentType: "application/json; charset=utf-8",
		success: function (msg) {
			msg.forEach(function (m/*, index */){
				var ligne = $("<tr></tr>");
				ligne.append($("<td>" + m.username + "</td>"));
				ligne.append($("<td>" + m.exercise + "</td>"));
				ligne.append($("<td>" + m.computer + "</td>"));
				ligne.append($("<td>" + m.content + "</td>"));
				$("tbody").append(ligne);
			})
		}
	});
})

Pour finir, il faut corriger le HTMl qui ne reflète plus le nouveau code,

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
<table class="table table-striped" id="display">
  <thead>
    <tr>
      <th>Username</th>
      <th>Exercise</th>
      <th>Machine</th>            
      <th>Contenu</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>username</td>
      <td>exercise</td>
      <td>computer</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

Le code fournit nécessite encore des changements, cependant dans le cadre de ce post c'est suffisant, et je crois, que tu trouveras et corrigeras par toi même les petits problèmes que j'y ai laissé.

a+

[hack224]

Bonjour,
Autant désolé pour la mauvaise lisibilité du code (faute d'indentation); je l'ai édité et je pense que c'est mieux qu'avant meme si c'est pas encore parfait. Et merci pour les reponses ça m'a permit de resoudre mon problème. Il a juste fallu que je supprime le contenu de la balise <tbody> pour éviter d'avoir deux entetes vu qu'il (ledit contenu) est créer dans le code jquery. Merci à tous !

[sarahjad]

j'ai essayé votre code mais ça marche pas pourriez vous m'aider svp ?!!!