<p>Looks like you're actually off-track in a couple of different ways...</p>
<h3>ElementCriteriaModel</h3>
<p>This code is going to return an <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel" rel="nofollow noreferrer">ElementCriteriaModel</a>:</p>
<pre><code>craft.tags.group('gameTags')
</code></pre>
<p>Think of an ElementCriteriaModel as being a <em>pending search query</em>... The only reason you'd need one is to either <strong>adjust the query further</strong> or <strong>run the query to get results</strong>.</p>
<p>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 <strong>an array of the query results</strong>. When you let the query run automatically, it's as if you had appended <code>.find</code> to the original line of code. If you append something like <code>.first</code> to your code, it'll return only a single element.</p>
<p>See <a href="http://buildwithcraft.com/docs/templating/elementcriteriamodel#fetching-the-elements" rel="nofollow noreferrer">&quot;Fetching the Elements&quot;</a> for more details.</p>
<h3>JavaScript</h3>
<p>As André pointed out in <a href="https://craftcms.stackexchange.com/a/10950/45">his answer</a>, you'd want to wrap a string in quotes when passing it to JavaScript.</p>
<p>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.</p>
<pre class="lang-js prettyprint-override"><code>// Setting a string
var gameTags = &quot;{{ myString }}&quot;;

// Setting an array
var gameTags = [&quot;{{ myArray | join('&quot;,&quot;') }}&quot;];
</code></pre>
<p>This operates under the assumption that <code>myArray</code> is already an array of strings. But be careful... When you run your ElementCriteriaModel, you'll end up with an array of <a href="http://buildwithcraft.com/docs/templating/tagmodel" rel="nofollow noreferrer"><strong>TagModels</strong></a>. You may need to extract the <code>title</code> of each TagModel before throwing them to JavaScript.</p>
<p>Take note also of the Twig <a href="http://twig.sensiolabs.org/doc/filters/join.html" rel="nofollow noreferrer"><code>join</code></a> filter. That will combine your array of strings into a &quot;superstring&quot;, which you can pass to JavaScript to build your JS array.</p>
<p>Hope that helps!</p>

CC BY-SA 3.0
2015-08-14T17:23:53.410Z
Ah, quotation marks! I've got it working now - thanks so much!
Andrea Hall
CC BY-SA 3.0
2015-08-12T21:29:25.660Z
2015-08-12T21:29:25.660Z
2020-06-17T08:56:27.903Z
Lindsey D
<p>In your first example, you are outputting an <code>ElementCriteriaModel</code>. 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 <code>gameTags</code> in the JS is just referencing itself rather than any Twig output.</p>

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

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

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

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

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

CC BY-SA 3.0
2015-08-12T21:27:10.100Z
2015-08-12T21:27:10.100Z
Bryan Redeagle
<p>You probably just need to wrap the twig output in a string, if that's what you need in your javascript. Try:</p>

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

CC BY-SA 3.0
2015-08-12T21:13:52.447Z
2015-08-12T21:13:52.447Z
André Elvan
<p>This came out of a <a href="https://craftcms.stackexchange.com/questions/10707/can-you-pass-a-variable-with-includejsfile">previous question</a></p>

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

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

<p>Here's what I <em>want</em> to do:</p>

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

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

<pre><code>{% set gameTags = craft.tags.group('gameTags') %}

&lt;script type="text/javascript"&gt;
   var gameTags = gameTags;
&lt;/script&gt;
</code></pre>

<p>JS considered that undefined.</p>

<p>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.</p>

<variable><javascript><jquery>
Can I set a JS variable to a Twig output tag?
# Can I set a JS variable to a Twig output tag?

(Asked by: username_0 on 2015-08-12)

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:


Javascript clearly doesn't like that syntax, so I tried setting the variable with Twig and calling that:
{% set gameTags = craft.tags.group('gameTags') %}



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.

**Tags:** variable, javascript, jquery

---

## 3 answers

### Answer by username_1 on 2015-08-12. Score: 4 | Accepted answer

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!

> **Comments:**
> **username_0**: Ah, quotation marks! I've got it working now - thanks so much!  

---

### Answer by username_2 on 2015-08-12. Score: 4

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:


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


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


---

### Answer by username_3 on 2015-08-12. Score: 1

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


---

