使用Javascript访问通过Twig传递的变量

Question

我有一个控制器将一个数组传递给twig模板，在该页面上编写的脚本中想要使用它。我该如何做？

我已经在我的.twig模板中尝试了这个：

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

但这仅适用于字符串。

- clifford.duke

---

将当前输出和期望输出添加到您的问题中，可以使找到解决方案变得更加容易。 - Supericy

Answer 1

您可能需要对数组进行json_encode，请尝试以下方法：

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

- Supericy

---

请不要忘记添加引号 var test = '{{ testArray|json_encode|raw }}'; - valerij vasilcenko

不，你不想引用它。那会使变量成为包含json值的字符串。没有引号，它将被正确解析为数组对象。 - Yep_It's_Me

你应该将JSON_HEX_TAG标志传递给json_encode函数：json_encode(constant('JSON_HEX_TAG'))。否则，你可能会得到损坏的HTML（尝试"<!--<script>"）。 - Sébastien

Answer 2

首先，从控制器发送json编码的数据，

然后在javascript中处理，

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

- user3189566

---

@JoséGabrielGonzález 你会怎么做？ - Amaury Hanser

嗯，如果你的JSON中有一些值带有单引号怎么办？比如 {"message": "Can't process"}。 - Klesun

Answer 3

我是这样做的：

返回控制器test.data然后

$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);
});

输出：

 ["one", "two"]

请点击 这里 查看相关技术文档。

- shades3002

Answer 4

`json_encode` 与 `raw` 过滤器结合使用效果很好。

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

不要忘记加上JSON_HEX_TAG标志。
否则，你可能会得到损坏的HTML。包含<!--<script>的字符串是一个很好的测试方式。

- Sébastien

Answer 5

在我的控制器中，我安装了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));

在我的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>

- Mourad MAMASSI