Bonjour à tous
Dans le code ci-dessous bien que tout fonctionne, la liste renvoyée rajoute autant de virgules consécutives en fin de table...
Je ne comprends pas d'où cela vient car la variable "categories" renvoie bien l'objet JSON demandé et correctement formatté, je suis concient qu'il existe certainement une meilleure méthode pour créer une table suite à l'utilisation de map(), je suis d'ailleurs preneur ...
Merci d'avance pour votre aiguillage...
listeCategoriesDepenses.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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48 function listeCategoriesDepenses() { //On instancie XMLHttp request let xhr = new XMLHttpRequest() xhr.open('get', 'listeCategoriesDepenses.php') xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { //Si réponse on la convertit let categories = JSON.parse(xhr.response) //création du tableau dans la page const tableau = document.createElement('table') //Boucle sur l'objet categories JSON const listeCategories = categories.map((item)=> { //Affiche les éléments catégories en liste return ` <tr> <td>${item.nomcategorie}</td> <td><button>Effacer</button></td> </tr> ` }) console.log(listeCategories) tableau.innerHTML = ` <thead> <tr><th colspan=2>Catégories Dépenses</tr></th> </thead> <tbody>${listeCategories}</tbody>` //Affichage du tableau document.body.appendChild(tableau) } else { //On gère les erreurs let erreur = xhr.response console.log("Erreur ! : " + erreur.message) } } //Envoi de la requête Ajax xhr.send() } listeCategoriesDepenses()
Partager