CODEWITHSUNDEEP
phpjavascriptsymfonytwig
clifford.duke
clifford.duke

Reputation: 4040

Use Javascript to access a variable passed through Twig

I have a controller that passes an array to a twig template, which I want to use in a script written on that page. How would I go about doing that?

I've tried this in my .twig template:

<script>
    $(document).ready(function(){
        var test = {{ testArray }};
});
</script>

but that only works if it's a string.

Upvotes: 64

Views: 74257

Answers (5)

Supericy
Supericy

Reputation: 5896

You might have to json_encode the array, try this:

<script>
    $(document).ready(function(){
        var test = {{ testArray|json_encode(constant('JSON_HEX_TAG'))|raw }};
    });
</script>

Upvotes: 198

S&#233;bastien
S&#233;bastien

Reputation: 2394

json_encode works well, in combination with the raw filter.

<script>
    $(document).ready(function(){
        let test = {{ testArray | json_encode(constant('JSON_HEX_TAG')) | raw }};
    });
</script>

Don't forget the JSON_HEX_TAG flag.
Otherwise, you can get broken HTML. A string containing <!--<script> is a good way to test that.

Upvotes: 1

shades3002
shades3002

Reputation: 1001

I do it this way:

Return of the controller test.data then

$test = array('data' => array('one','two'))

Twig:

<div id="test" data-is-test="{{ test.data|json_encode }}"></div>

Js: 

$(document).ready(function() {
    var test = $('#test').data("isTest");
    console.log(test);
});

Output:

 ["one", "two"]

documentation here

Upvotes: 5

Mourad MAMASSI
Mourad MAMASSI

Reputation: 885

In My Controller I Install SerializerBundle

$serializer = $this->get('serializer');
        $countries = $this->getDoctrine()->getRepository("QSCORBundle:CountryMaps")->findAll();
        $jsonCountries = $serializer->serialize($countries, 'json');
 return $this->render('QSCORBundle:Default:index.html.twig',array("countries"=> $jsonCountries));

And In My File Twig 

<script type="text/javascript" >
 var obj = {{ countries|json_encode|raw }};
 var myObject = eval('(' + obj + ')');

 console.log(myObject[0]['capital_latitude'] + " " + myObject[0]['capital_longitude']);//for the First Element
</script>

Upvotes: 0

user3189566
user3189566

Reputation: 107

First, send the data json encoded from controller and

then in javascript,

var context= JSON.parse('{{ YourArrayFromController|raw}}');

Upvotes: 8

Related Questions