variable Twig in Javascript

Question

How can i pass {{app.user}} into Javascript ?

for now I do a block like;

<script type="text/javascript">
    var app_name = '{{ app_name }}';
    var app_url= '{{ app_url }}';
    var app_description= '{{ app_description }}';
    var app_email= '{{ app_email }}';
    var app_title= '{{ app_title }}';
    var app_dominio= '{{ app_dominio }}';
    var env = '{{ app.environment }}';
</script>

where these parameters are set in config.yml

Answer 1

I don't understand what's exactly your problem with the solution you choose, it should work well with {{ app.user }} except that app.user is an object, so you should have a toArray function into your user and call :

app_user = {{ app.user.toArray|json_encode() }};

Or call each parameter of the user like {{ app.user.id }}

Documentation : https://twig.sensiolabs.org/doc/filters/json_encode.html

You should use json_encode for your variables above, if you have a quote into one of your string it will break your javascript.

Example for profile:

<script type="text/javascript">
    nickname = {{ profile.nickname|json_encode() }}; // Nickname will be a string
    // 2nd solution if you have more informations related to profile
    profile = {
        nickname: {{ profile.nickname|json_encode() }},
        lastname: {{ profile.lastname|json_encode() }}
    };
    // Profile is now an object with a nickname property.
    // use profile.nickname on your javascripts
</script>

Answer 2

The accepted solution doesn't work (anymore ?) because of twig autoescaping the outputs, changing all the JSON " with &quot;.

Equivalent would now have to use the raw filter:

<script type="text/javascript">
    nickname = {{ profile.nickname|json_encode()|raw }}; // Nickname will be a string
    // 2nd solution if you have more informations related to profile
    profile = {
        nickname: {{ profile.nickname|json_encode()|raw }},
        lastname: {{ profile.lastname|json_encode()|raw }}
    };
    // Profile is now an object with a nickname property.
    // use profile.nickname on your javascripts
</script>

That being said, directly printing the raw JSON into the javascript may cause some problems, has in this configuration:

<script>
    var myvar = {{ '{"test": "</script>"}'|raw }};
</script>

The </script> tag in the JSON would be interpreted by the HTML parser, resulting in a broken script.

The truly correct way to do this would rather be to print the JSON as an escaped string, and then parse it within the js script:

<script>
    var myvar = JSON.parse('{{ '{"test": "</script>"}'|e('js') }}');
</script>