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

Version imprimable

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 :roll:

Mon Controller :

Code:

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:

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:

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.

24/10/2021, 08h59
-Nikopol-

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
24/10/2021, 10h40
bndd24

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.. ? :weird:
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 ..
24/10/2021, 10h58
-Nikopol-

Citation:

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é
24/10/2021, 11h19
bndd24

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.. :D 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.
24/10/2021, 11h37
-Nikopol-

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
24/10/2021, 11h48
bndd24

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

1 pièce(s) jointe(s)

Citation:

Envoyé par -Nikopol-

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 :

Citation:

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:

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 :

Pièce jointe 607404

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

25/10/2021, 13h38
-Nikopol-

Citation:

ta methode data attribute

ce n'est pas ma méthode

Citation:

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

Citation:

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

Citation:

Les tableaux ne sont donc pas possible.

les attributs html sont des strings, donc il faut convertir en string
25/10/2021, 13h49
bndd24

- 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 :D

- "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

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:

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"]

25/10/2021, 14h43
bndd24

impeccable merci ! ça fonctionne très bien :chin: