Passing Information from Twig to JavaScript
Warning: You are browsing the documentation for Symfony 4.x, which is no longer maintained.
Read the updated version of this page for Symfony 7.2 (the current stable version).
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 5 6 7
document.addEventListener('DOMContentLoaded', function() {
var userRating = document.querySelector('.js-user-rating');
var isAuthenticated = userRating.dataset.isAuthenticated;
// or with jQuery
//var isAuthenticated = $('.js-user-rating').data('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>