You are browsing the Symfony 4 documentation, which changes significantly from Symfony 3.x. If your app doesn't use Symfony 4 yet, browse the Symfony 3.4 documentation.

Passing Information from Twig to JavaScript

4.1 version
Maintained Unmaintained

Passing Information from Twig to JavaScriptΒΆ

In Symfony applications, you may find that you need to pass some dynamic data (e.g. user information) from Twig to your JavaScript code. One great way to pass dynamic configuration is by storing information in data attributes and reading them later in JavaScript. For example:

1
2
3
<div class="js-user-rating" data-is-authenticated="{{ app.user ? 'true' : 'false' }}">
    <!-- ... -->
</div>

Fetch this in JavaScript:

1
2
3
4
document.addEventListener('DOMContentLoaded', function() {
    var userRating = document.querySelector('.js-user-rating');
    var isAuthenticated = userRating.dataset.isAuthenticated;
});

Note

When accessing data attributes from JavaScript, the attribute names are converted from dash-style to camelCase. For example, data-is-authenticated becomes isAuthenticated and data-number-of-reviews becomes numberOfReviews.

There is no size limit for the value of the data- attributes, so you can store any content. In Twig, use the html_attr escaping strategy to avoid messing with HTML attributes. For example, if your User object has some getProfileData() method that returns an array, you could do the following:

1
2
3
<div data-user-profile="{{ app.user ? app.user.profileData|json_encode|e('html_attr') }}">
    <!-- ... -->
</div>

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.