twig variable not found in javascript

Question

I'm trying to pass a twig array variable to javascript, but for some reason it keeps stating that the variable does not exist.

My twig:

{% set clients = [] %}
{% for work in works %}

    {% set clients = clients|merge([ work.name ]) %}

{% endfor %}

{% set client_array = clients|json_encode|raw  %}

When I try and call client array with {{client_array}} I have no trouble whatsoever, it returns the correct array.

However my problem is when I try to define a javascript variable below in a javascript block on the page to be equal to client_array.

<script>
var clients = '{{ client_array }}';
...
 </script>

I keep getting

Variable "client_array" does not exist.

I feel there's some dumb syntax error I'm making here. Can anyone see the problem?

do you have actual {% block %} blocks in that template (or is it a different template)? if so, then it's possibly a scope issue. also: the quotes are probably a problem, if the var is json encoded, but not related to the twig error. — Jakumi
– Jakumi, Commented Sep 16, 2019 at 5:52
They were in actual blocks in the template. Scope was what I was able to figure out by elimination. It seems to have something to do with "set" variables within a twig not appearing in different blocks. I chose to create the array in the controller instead, and that variable was able to be passed. — nomistic
– nomistic, Commented Sep 17, 2019 at 15:42

nomistic · Accepted Answer · 2019-09-16 04:21:46Z

1

ok, so I took a different approach to this and chose to set the variable in the controller and that worked

    $clients = [];
    foreach ($works as $work) {
        $client = $work['name'];
        array_push($clients, $client);
    }

While comparing the output side by side, they were identical, so my conclusion is that it appears that twig "set" variables don't seem to be recognized outside the block. (don't quote me on this)

answered Sep 16, 2019 at 4:21

nomistic

2,9624 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manzolo · Accepted Answer · 2019-09-16 07:15:46Z

Try Passing Information from Twig to JavaScript

In controller create variable:

public function index(Request $request) {

    /* ... */
    $clients = array(array("id" => 1, "name" => "test1"), array("id" => 2, "name" => "test2"));
    $names = array_map(function ($ar) {
        return $ar['name'];
    }, $clients);
    $twigparms = array("clients" => $names);
    return $this->render("YourTemplate/index.html.twig", $twigparms);
}

in Twig use it

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Page Title</title>
    <body>

        <div class="clients" id="clients" data-names="{{ clients|json_encode|e('html_attr') }}"></div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var clientstmp = document.querySelector('.clients');
                var clients = clientstmp.dataset.names;
                console.log(clients);
            });
        </script>

    </body>
</html>

Collectives™ on Stack Overflow

twig variable not found in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related