Can I set a JS variable to a Twig output tag?

Question

This came out of a previous question

I need to set a variable of a tag group that I can reference in jquery for use with a plugin.

I'm declaring this variable in a tag so my included js files can access it.

Here's what I want to do:

<script type="text/javascript">
    var gameTags = {{ craft.tags.group('gameTags') }};
</script>

Javascript clearly doesn't like that syntax, so I tried setting the variable with Twig and calling that:

{% set gameTags = craft.tags.group('gameTags') %}

<script type="text/javascript">
   var gameTags = gameTags;
</script>

JS considered that undefined.

I'm probably going about this the wrong way. I'm relatively new to javascript and very new to craft, so I'm a little stumped.

Answer 1

Looks like you're actually off-track in a couple of different ways...

ElementCriteriaModel

This code is going to return an ElementCriteriaModel:

craft.tags.group('gameTags')

Think of an ElementCriteriaModel as being a pending search query... The only reason you'd need one is to either adjust the query further or run the query to get results.

Fortunately Craft is smart enough to automatically run an ElementCriteriaModel if you use it an another context. In fact, it will be automatically parsed as an array of the query results. When you let the query run automatically, it's as if you had appended .find to the original line of code. If you append something like .first to your code, it'll return only a single element.

See "Fetching the Elements" for more details.

JavaScript

As André pointed out in his answer, you'd want to wrap a string in quotes when passing it to JavaScript.

However, it looks like you're returning an array. So you'd probably need to manipulate that array however you'd like in Twig, before passing it to JavaScript as either a string or an array.

// Setting a string
var gameTags = "{{ myString }}";

// Setting an array
var gameTags = ["{{ myArray | join('","') }}"];

This operates under the assumption that myArray is already an array of strings. But be careful... When you run your ElementCriteriaModel, you'll end up with an array of TagModels. You may need to extract the title of each TagModel before throwing them to JavaScript.

Take note also of the Twig join filter. That will combine your array of strings into a "superstring", which you can pass to JavaScript to build your JS array.

Hope that helps!

Answer 2

In your first example, you are outputting an ElementCriteriaModel. That is a query for tags rather than the tags themselves. It doesn't output anything usable by JS You're almost doing the same in the second example, except that your reference to gameTags in the JS is just referencing itself rather than any Twig output.

What you want to do is to query the tags and output in the way that JS can use. Something like this:

<script type="text/javascript">
    var gameTags = [{% for tag in craft.tags.group('gameTags') %}"{{ tag.title }}",{%endfor %}];
</script>

That should output a JS array of strings with each string being a tag. Something like below.

<script type="text/javascript">
    var gameTags = ["action","adventure","platform","rpg","sports",];
</script>

If you're a stickler for commas in arrays, there's ways to not output that after the last tag.

Answer 3

You probably just need to wrap the twig output in a string, if that's what you need in your javascript. Try:

<script type="text/javascript">
  var gameTags = "{{ craft.tags.group('gameTags') }}";
</script>