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

Symfony PHP Discussion :

Passer des variables de mon Controller a Twig et ensuite de Twig a mon fichier Js (Symfony Encore)


Sujet :

Symfony PHP

  1. #1
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut Passer des variables de mon Controller a Twig et ensuite de Twig a mon fichier Js (Symfony Encore)
    Salut a tous,

    Je bosse avec la librairie chartjs, j'ai besoin de passer des variables, j'ai créé un tableau d'exemple que j'arrive bien a passer du controller a twig mais pas de twig a mon fichier js que je gère avec Encore

    Mon Controller :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #[Route('/', name: 'home')]
        public function index(): Response
        {
            $test = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6'];
     
            return $this->render('home/index.html.twig', [
                'lab' => json_encode($test)
            ]);
        }
    Mon Twig :

    Code twig : 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
    {% extends 'base.html.twig' %}
     
    {% block title %}Hello HomeController!{% endblock %}
     
    {% block body %}
    <div class="container">
        <h1>Home</h1>
     
        <canvas id="myChart" width="400" height="100"></canvas>
    </div>
    {% endblock %}
     
    {% block javascripts %}
        {{ parent() }}
        {{ encore_entry_script_tags('chart') }}
    {% endblock %}

    Mon fichier chart.js (lire le commentaire dans le code)

    Code js : 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
    import Chart from 'chart.js/auto';
     
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: lab, // JE NE SAIS PAS COMMENT RECUPERER LA VARIABLE LAB DE MON CONTROLLER ICI... il me dit : lab is not defined
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
     
    console.log('ok');

    quelqu'un aurait une idée ?

    merci a vous.

  2. #2
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 127
    Points : 11 187
    Points
    11 187
    Billets dans le blog
    5
    Par défaut
    tu peux utiliser les attributs de données (data attribute) dans ta balise canvas et la récupérer dans ton js : https://developer.mozilla.org/fr/doc...ata_attributes

  3. #3
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    dans la doc que tu envoies, ils disent qu'il faut déclarer une valeur avec le préfixe data- alors que moi j'ai déjà les déclarations (de la méthode que j'envoie a twig, d'ailleurs quand je fais un dump j'ai bien les variables visibles) ! il faut simplement que je les récupères, je ne pense pas que ce soit une bonne pratique de faire une autre déclaration dans le canvas.. ?
    c'est comme si que je déclare une variable dans le twig avec pour valeur "salut" et que je déclare une autre variable avec la même valeur "salut" dans le controlleur ..

  4. #4
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 127
    Points : 11 187
    Points
    11 187
    Billets dans le blog
    5
    Par défaut
    je ne pense pas que ce soit une bonne pratique de faire une autre déclaration dans le canvas.. ?
    et pourtant ...
    ce que tu appelles variable twig est une variable php donc pour la transmettre à javascript les data attributes sont un bonne methode.
    D'ailleurs un simple "twig to js" dans google te confirmera que c'est la methode qui semble le plus utilisé

  5. #5
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    oui c'est bien de cette façon pour passer des variables d'un élément html a du js mais ce n'est pas ma demande.. ma variable n'est pas déclarée dans mon twig mais dans mon controller (voir code plus haut dans mon premier message), twig a en effet la capacité de la récupérer avec {{ xxx }} mais je veux pouvoir la passer a mon asset js gérer par Symfony Encore SANS devoir la déclarée une seconde fois dans mon twig.

  6. #6
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 127
    Points : 11 187
    Points
    11 187
    Billets dans le blog
    5
    Par défaut
    tu peux passer effectivement directement ta var twig dans ton script js mais s'il est dans la page mais ce n'est pas un bonne pratique donc je l'ai mis de coté. Je rétire que ta variable que ton controller renvoie est une variable php qui devra donc passer par les methodes que tu ne veux pas pour être utilisé en js.
    Si tu veux directement cette variable en js, il te faut créer une fonction dans ton controller (qui te renverra une Response() ) et du coté de js tu fais un fetch

  7. #7
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    selon toi, il est donc mieux de redéclarer une nouvelle fois les mêmes valeurs dans le twig avec data-

    je vais voir de mon coté, je trouve que cette façon de faire est étrange, elle ne serait pas étrange si bien-sur je n'avais pas fait de déclaration déjà dans mon controller

    enfin bon je regarde de mon coté, je te remercie pour le coup de main

  8. #8
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    Citation Envoyé par -Nikopol- Voir le message
    tu peux utiliser les attributs de données (data attribute) dans ta balise canvas et la récupérer dans ton js : https://developer.mozilla.org/fr/doc...ata_attributes
    Je suis dessus depuis ce matin, j'ai réussi a passer les variables de chaine de caractères avec ta methode data attribute comme le titre de mon graphique (data-title).. mais pas les tableaux !

    J'avais bien raison... dans mon cas cette méthode n'est pas adaptée, il suffit de lire la doc :
    https://developer.mozilla.org/fr/doc...lement/dataset
    Un passage de la doc :
    Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (, tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).
    Les tableaux ne sont donc pas possible.

    pourtant encore plus bizarre, lorsque je fais un :

    console.log(ctx.dataset.lab);

    J'ai bien mon tableau dans la console ! (voir commentaire dans le code, ligne 7, 9 et 33)

    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
    import Chart from 'chart.js/auto';
     
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ctx.dataset.lab, // ça ne fonctionne pas ! (tableau)
            datasets: [{
                label: ctx.dataset.title, // ça fonctionne ! (string)
                data: [5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
     
    console.log(ctx.dataset.lab); // j'ai bien mon tableau ["test1","test2","test3","test4","test5","test6"]

    seulement, le résultat a l'affichage :

    Nom : graph.png
Affichages : 21
Taille : 29,6 Ko

    alors qu'en le tapant manuellement en dur j'ai bien 6 colonnes nickel, voila je ne comprends plus rien

  9. #9
    Responsable LaTeX

    Avatar de -Nikopol-
    Homme Profil pro
    Développeur Web
    Inscrit en
    mai 2013
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Haute Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Enseignement

    Informations forums :
    Inscription : mai 2013
    Messages : 2 127
    Points : 11 187
    Points
    11 187
    Billets dans le blog
    5
    Par défaut
    ta methode data attribute
    ce n'est pas ma méthode
    J'avais bien raison... dans mon cas cette méthode n'est pas adaptée, il suffit de lire la doc :
    je trouve ton ton très désagréable depuis le début de cette conversation
    il suffit de lire la doc :
    https://developer.mozilla.org/fr/doc...lement/dataset
    Un passage de la doc :
    Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (, tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).
    Les tableaux ne sont donc pas possible.
    en lisant, je comprend que ce sont les noms de l'attribut dont on parle ici pas de l'attribut en lui même
    Les tableaux ne sont donc pas possible.
    les attributs html sont des strings, donc il faut convertir en string

  10. #10
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    - quand je dis "ta methode" ce n'est pas péjoratif, désolé si tu l'as mal pris. c'était simplement pour faire référence a ton message. la langue française est ma deuxième langue, parfois j'utilises pas les bons mots etc

    - "en lisant, je comprend que ce sont les noms de l'attribut dont on parle ici pas de l'attribut en lui même"
    tu as raison sur ce point, je dois le reconnaitre ! il ne s'agit pas des valeurs, mais bien des noms.

    - "les attributs html sont des strings, donc il faut convertir en string"
    la, je ne comprends pas ! ce n'est pas logique, pourquoi mon tableau est visible sans problème avec le console.log mais ne fonctionne pas dans mon graph ! pourtant en remplaçant avec un tableau écrit en dur cela fonctionne ! normalement il ne doit pas fonctionner non plus sur le console.log

  11. #11
    Membre éprouvé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2012
    Messages
    617
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2012
    Messages : 617
    Points : 1 110
    Points
    1 110
    Par défaut
    tu passes à chartjs des données sous forme de string alors que chartjs attends un tableau. Tu attaches du json, qui est un string, au dataset du dom, à la récupération en JS tu dois pouvoir convertir le json en tableau.
    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
     
    import Chart from 'chart.js/auto';
     
    var ctx = document.getElementById('myChart');
    const labels =JSON.parse( ctx.dataset.lab);
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels, // ça ne fonctionne pas ! (tableau)
            datasets: [{
                label: ctx.dataset.title, // ça fonctionne ! (string)
                data: [5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
     
    console.log(ctx.dataset.lab); // j'ai bien mon tableau ["test1","test2","test3","test4","test5","test6"]

  12. #12
    Membre habitué
    Homme Profil pro
    Webmaster
    Inscrit en
    juillet 2015
    Messages
    487
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : juillet 2015
    Messages : 487
    Points : 181
    Points
    181
    Par défaut
    impeccable merci ! ça fonctionne très bien

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

Discussions similaires

  1. Importer via asp.net c# des variables dans mon namespace xsl
    Par akaii dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 23/01/2006, 09h41
  2. Réponses: 6
    Dernier message: 19/12/2005, 14h41
  3. Réponses: 11
    Dernier message: 09/12/2005, 15h59
  4. [C#][XSLT] Passer des variables
    Par Landolsi dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 30/09/2005, 15h26
  5. Réponses: 3
    Dernier message: 03/02/2005, 14h07

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