Jquery - Modifier un tableau

Version imprimable

Bonjour, j'ai une toute petite question: j'essai (après avoir récupéré des données de planning (3 colonnes et 3 attributs) au format json (exemple ci-joint) de modifier le tableau bootstrap avec ces données. Or, j'ai essayé quelques les méthodes html/js et jquery (enfin je crois) les plus courantes à savoir: append, innerHTML et appendTO ...
J'ai utilisé une boucle afin de créer les 3 lignes et un console.info pour me dire que la fonction est bien exécutée mais rien n'y fait :(
Code:

1 2 3 {"status": "success","result": {"0": ["Juillet/Aout","..." ],"1": ["Aout/Septembre","..." ],"2": ["Septembre/Octobre","À venir"]},"publish_date": "2019-06-03T10:01:05.484Z"}
ma fonction 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 $(document).ready(function() { let pubDate = $("#publish_date"); $.get('une url ...', function(d) { let p = new Date(d.publish_date); let dMY = p.getDate() + "/" + (p.getMonth() + 1) + "/" + p.getFullYear(); pubDate.html(dMY); //marche bien let t = $("#tbl"); for (i = 0; i < d.length; i++) { //Lignes ici t.appendTo("<tr><th scope='row'>"+d[i][0]+"</th><td><ul>"); for(j = 1; j < d[i].length; j++) { //colonnes ici t.appendTo("<li>"+d[i][j]+"</li>"); } t.innerHTML += "</ul></td></tr>" } console.info('Mise à jour du planning !') console.log(t) }) });
il n'y a que la date de dernière mise à jour qui fonctionne bien :( pubdate.html( ... )

Merci énormément de vos réponses

PS: voici le tableau en question
Code:

1 2 3 4 5 6 7 8 9 10 <table class="table table-bordered"> <thead> <tr> <th scope="col">Période</th> <th scope="col">Jeux/Activité</th> </tr> </thead> <tbody id="tbl"> </tbody> </table>

03/06/2019, 12h53
SpaceFrog

tu ne confondrais pas AppendTo http://api.jquery.com/appendTo/
et Append http://api.jquery.com/append/ ?
03/06/2019, 12h56
tutosfaciles48

Bonjour, oui effectivement, mais append ne marche pas non plus;
Pensez-vous que cela serait la cause que le tableau ne ai besoin d'un premier tr pour pouvoir être modifié par la suite ? Merci

TOn souci vient de ta boucle sur le json ..;
un json n'a pas de length ...

Il faut faire un for each ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
d={"status": "success","result": {"0": ["Juillet/Aout","..."
],"1": ["Aout/Septembre","..."
],"2": ["Septembre/Octobre","À venir"]},"publish_date": "2019-06-03T10:01:05.484Z"}
 
$tbl=$('#tbl');
 
$.each( d.result, function(key, val){
 
$l =$('<tr/>'); // création de la ligne 
$c1= $('<td/>').html(val[0]); // création de la cellule 1
$c2= $('<td/>').html(val[1]); // création de la cellule 2
$l.append($c1,$c2); // on appende les deux cellules dans la ligne
 
$tbl.append($l); // on appende la ligne dans le tbody
 
});

03/06/2019, 14h20
tutosfaciles48

Ah c'était donc ça... Merci beaucoup, je teste cet aprem et je met en résolu.
03/06/2019, 17h22
tutosfaciles48

Re-bonjour, pour faire avec x éléments dans dans chaques cellules, il faut aussi utiliser for each ? car je compte mettre un ul puis un li dans chaque cellule. Je teste et j'envoi un bout de code
Cordialement,
03/06/2019, 17h25
SpaceFrog

tu peux mettre ce que tu vaux dans le html ...
du code html ou alors tu peux aussi créer les éléments DOM avec JQUERY et faire des append de li dans un ul ...

Bon, après plusieurs essais je suis arrivé à un fonctionnement qui reste seulement à peaufiner.
Code final:

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
$(document).ready(function() {
   let pubDate = $("#publish_date");
 
$.get('url de l\'api', function(d) {
      let p = new Date(d.publish_date);
 
      let dMY = p.getDate() + "/" + (p.getMonth() + 1) + "/" + p.getFullYear();
 
pubDate.html(dMY);
 
$tbl = $("#tbl");
 
$.each(d.result, (key, val) => {
         let l = "<tr>";
 
l += "<td>"+val[0]+"</td>";
 
         let ul = "<td><ul>";
 
         for (i = 1; i < val.length; i++) {
            ul += "<li>"+val[i]+"</li>";
}
 
         ul += "</ul></td>";
 
l += ul;
l += "</tr>";
$tbl.append(l);
})
   })
});

PS: Cela marche, merci de votre aide