IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

fonction Map() renvoie des virgules !


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 106
    Points : 271
    Points
    271
    Par défaut 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 : 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()

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 351
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 351
    Points : 15 697
    Points
    15 697
    Par défaut
    votre code à l'air correct.
    affichez le contenu de categories après l'analyse json.

  3. #3
    Membre actif
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 106
    Points : 271
    Points
    271
    Par défaut
    Voici des captures :

    1/ Apparition des fameuses virgules ...
    2/ Résultat variable "categories"
    3/ Résultat variable "listecategories" qui contient le html nécessaire à une partie de la table.

    Nota Bene : Aucune des deux variables ne contient de virgules résiduelles qui pourtant apparaissent en fin de la liste de catégorie en 1...

    Nom : Capture liste categories depenses.JPG
Affichages : 345
Taille : 46,5 Ko
    Nom : Capture liste categories depenses2.JPG
Affichages : 336
Taille : 230,3 Ko

    4/ Les virgules apparaissent après le body de la table et en cliquant dessus elles sont ignorées en tant qu'élément dans l'inspecteur du navigateur INCOMPREHENSIBLE !!!
    Le nombre de virgules correspond à celui des virgules qui séparent chaque objet du tableau final, mais pourquoi apparaissent elles ?

    Nom : Capture liste categories depenses3.JPG
Affichages : 324
Taille : 46,1 Ko

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 351
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 351
    Points : 15 697
    Points
    15 697
    Par défaut
    vu ! c'est quand vous utilisez le tableau listeCategories dans la chaine de caractères, les éléments sont séparés par défaut par une virgule.
    pour assembler les éléments, utiliser join avec un séparateur vide :
    https://developer.mozilla.org/fr/doc...cts/Array/join

  5. #5
    Membre actif
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 1 106
    Points : 271
    Points
    271
    Par défaut
    Merci pour votre réponse

    En effet si je modifie pour <tbody>${listeCategories.join(' ')}</tbody> les virgules disparaissent...

    Cependant, il doit bien y avoir une autre méthode évitant d'avoir à utiliser join() non ?
    Je ne pense pas que créer la variable "listeCategories" soit la bonne méthode pour remplir la table, si vous avez un autre conseil je suis preneur(... sans vouloir abuser... )

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 351
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 351
    Points : 15 697
    Points
    15 697
    Par défaut
    je n'ai pas compris votre souci. les virgules ont été enlevées et vous générez bien le code html souhaité, non ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 27/05/2021, 13h18
  2. Réponses: 1
    Dernier message: 26/04/2015, 06h45
  3. Map contenant des pointeurs sur des fonctions membres
    Par Bash01 dans le forum Débuter
    Réponses: 1
    Dernier message: 18/05/2010, 15h06
  4. Appel à des fonctions incluses dans des DLL
    Par Greybird dans le forum Langage
    Réponses: 3
    Dernier message: 26/05/2003, 13h33
  5. Fonctions de manipulation des chaines et des dates
    Par Fares BELHAOUAS dans le forum Débuter
    Réponses: 3
    Dernier message: 09/11/2002, 22h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo