fonction Map() renvoie des virgules !
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:
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() |
