How to convert a Twig array into JavaScript array

Question

I have a Twig array and I want to send it to JavaScript:

<script>
    var packages = {{packages}}
</script>

Error! Array to String Conversion.

How should I do that?

can u elaborate more... Your question is not clear – Yashwardhan Pauranik Oct 19 '18 at 08:46 — Yashwardhan Pauranik, Oct 19 '18 at 08:46

score 29 · Answer 1 · answered Aug 13 '20 at 08:59

29

I have an array from twig named filters, this single line did the job

const filters = JSON.parse('{{ filters | json_encode | raw }}');

answered Aug 13 '20 at 08:59

Stanley85

I had to use backtick (`) instead of single quotes in the function param because one of the JSON values had a single-quote in it (apostrophe essentially). – SteveExdia Apr 26 '23 at 16:09

score 14 · Accepted Answer · edited Oct 14 '22 at 23:37

14

You may use json_encode twig filter to pass your arrays into javascript:

Twig

{% set packages = [1, 2, 3, 4] %}

<script>
    var packages = {{ packages|json_encode }}
</script>

Output

<script>
    var packages = [1,2,3,4]
</script>

edited Oct 14 '22 at 23:37

Dharman

answered Oct 20 '18 at 16:08

1

This does not work with Twig v2.13.1, use @Stanley85 's answer https://stackoverflow.com/a/63391632/6127393 – Arleigh Hix Dec 15 '21 at 17:47

score 1 · Answer 3 · answered Oct 19 '18 at 09:42

1

Try this:

//javascript
const myArray = JSON.parse('{{ packages[0] }}');

Or this:

//javascript
const myArray = {{ packages[0] }};

answered Oct 19 '18 at 09:42

Yega

score 0 · Answer 4 · edited Apr 24 '23 at 09:24

0

The existing answers didn't work for me. Specifically, it failed when the original array contained any string containing newlines (\n).

This is what worked for me:

let jsArray = JSON.parse('{{ twig_array|json_encode|e("js") }}');

edited Apr 24 '23 at 09:24

goulashsoup

answered Aug 10 '22 at 21:16

Magnus

4 Answers4