Discussion :

[tutosfaciles48]

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 :

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

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 :

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
$(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 html :

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

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>

[SpaceFrog]

tu ne confondrais pas AppendTo http://api.jquery.com/appendTo/
et Append http://api.jquery.com/append/ ?

[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

[SpaceFrog]

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

Il faut faire un for each ...

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
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
 
});

[tutosfaciles48]

Ah c'était donc ça... Merci beaucoup, je teste cet aprem et je met en résolu.

[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,

[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 ...

[tutosfaciles48]

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

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
$(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