title: traverse twig array in javascript block
body: <p>Using Symfony2.3.4 and PHP5.6.3.</p>
  
  <p>I need to <code>THE TITLE</code>.</p>
  
  <p>See, I have this template </p>
  
  <pre><code>{#new.html.twig#}
  
  {% extends 'GCBundle::layout.html.twig' %}
  
  {% block title %}{{parent()}} | Create chart {%endblock title %}
  
  {% block content -%}
      {% if errors is defined %}
          {#not sure if I need this#}    
      {% endif %}
  
      &lt;FORM class="form-horizontal" action="{{path('chart_create', { 'id' : entity.id })}}"
            method="post" {{ form_enctype(form) }}&gt;
          &lt;center&gt;&lt;h3&gt;Create chart&lt;/h3&gt;&lt;/center&gt;
  
          {{ form_widget(form) }}
          &lt;DIV class="form-actions"&gt;
              &lt;BUTTON name="submit" type="submit"
                      class="btn btn-primary"&gt;&lt;I class="glyphicon-check"&gt;&lt;/I&gt;
                  {{ 'Save'|trans }}&lt;/BUTTON&gt;
              &lt;a class="btn" href="{{ path('chart') }}"&gt;
                  &lt;I class="glyphicon-ban"&gt;&lt;/I&gt; {{ 'Cancel'|trans }}&lt;/a&gt;
          &lt;/DIV&gt;
      &lt;/FORM&gt;
  {% endblock %}
  {% block javascripts %}
      {{parent()}}
      {% if errors is defined %}
      &lt;script type="text/javascript"&gt;
          alert({{errors}}); //THIS DOESN'T WORK, JUST SO U KNOW WHAT I NEED
      &lt;/script&gt;
      {% endif %}
  {% endblock %}
  </code></pre>
  
  <p>The variable <code>errors</code> is a simple array structured: <code>$key --&gt; &lt;fieldname&gt;</code> 
  and<br>
  <code>$value --&gt; &lt;errormessage&gt;</code>, this varible comes from the controller,<br>
  so far so normal.</p>
  
  <p>Now, I need to use that array in the js block to <strong><em>alert</em></strong> the error or <strong><em>tooltip</em></strong> it or what ever but I need to access its keys and values like, say, with the <strong>.each()</strong> function.</p>
  
  <p>SAMPLE ERROR: </p>
  
  <pre><code>array (size=1)
    'CI' =&gt; 'CI must be unique'
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <pre><code>array (size=2)
    'CI' =&gt; string 'CI must be unique' (length=53)
    'height' =&gt; string 'This value is not valid.' (length=24)
  </code></pre>
  
  <p>This is what an error looks like when I {{dump(errors)}} in the template.</p>
  
  <p>Look, I <em>could</em> find a workaround for this (for example)splitting the array into two arrays(one with the keys and the other one with the values) with auto-generated integer indexes each so I could traverse it with a for loop instead of an .each() function as I want, but I thought this would be a good moment to add this one to the <strong><em>"knowledge bag"</em></strong>, corny as it sounds...</p>
  
  <p>if you could please show some code with the ideas in your comments...</p>
  
  <p><strong>EDIT2:</strong></p>
  
  <p>I tried the <code>json_encode</code> like this:</p>
  
  <pre><code>ChartController.php
  $errors = array();
          foreach ($form as $field) {
              if ($field-&gt;getErrors()) {
                  $errors [$field-&gt;getName()] = $field-&gt;getErrors();
                  $errors[$field-&gt;getName()] = $errors[$field-&gt;getName()][0]-&gt;getMessage();
              }
          }
  
          return $this-&gt;render('GCBundle:Chart:new.html.twig', array(
                      'entity' =&gt; $entity,
                      'form' =&gt; $form-&gt;createView(),
                      'errors' =&gt; json_encode($errors),
          ));
  </code></pre>
  
  <p>Now when I {{dump(errors)}} in the template it outputs:</p>
  
  <pre><code>string '{"CI":"CI must be unique","height":"This value is not valid."}' (length=102)
  </code></pre>
  
  <p>and my actual javascript block:</p>
  
  <pre><code>new.html.twig
  {% block javascripts %}
      {{parent()}}
      {{dump(errors)}}
      {% if errors is defined %}
      &lt;script type="text/javascript"&gt;
          var temp = {{errors}};
          $.each(temp, function(k,v){
              alert(k);
          });
  
      &lt;/script&gt;
      {% endif %}
  {% endblock %}
  </code></pre>
  
  <p>I need to traverse it somehow but if I use the code above, the browser's console outputs this js error:</p>
  
  <p>SyntaxError: invalid property id</p>
  
  <p><strong>EDIT3:</strong></p>
  
  <p>I checked your link but although it serializes the <code>$errors</code> OK, it doesn't say anything about outputing those errors in a javascript block which <em>is</em> what I actually need.</p>
  
  <p>Take a look at all the ways I've tried and I hope you can come up with something from the errors I'm getting:</p>
  
  <p>1-</p>
  
  <pre><code>//With the serializer
  //ChartController.php
  $errors = $this-&gt;get('form_serializer')-&gt;serializeFormErrors($form, true, true);
  
          return $this-&gt;render('GCBundle:Chart:new.html.twig', array(
                      'entity' =&gt; $entity,
                      'form' =&gt; $form-&gt;createView(),
                      'errors' =&gt; $errors,
          ));
  
  //new.html.twig
  &lt;script type="text/javascript"&gt;
  var errors = {{errors}};
  //WHETHER I USE A FOR LOOP
  for(var err in errors){
      alert(err);
  }
  //OR AN $.EACH() FUNCTION
  $.each(errors, function(k,v){
      alert(k);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>ERROR:  </p>
  
  <pre><code>An exception has been thrown during the rendering of a template  
  ("Notice: Array to string conversion in C:\xampp\htdocs\Projects\GC\app\cache  
  \dev\twig\1a\00\0a022cd3a377dd20d520580dffea.php line 100") in  
  GCBundle:Chart:new.html.twig at line 31.
  </code></pre>
  
  <p>2- </p>
  
  <pre><code>//Without the serializer
  //ChartController.php
  $errors = array();
  foreach ($form as $field) {
      if ($field-&gt;getErrors()) {
          $errors [$field-&gt;getName()] = $field-&gt;getErrors();
          $errors[$field-&gt;getName()] = $errors[$field-&gt;getName()][0]-&gt;getMessage();
      }
  }
  
  return $this-&gt;render('GCBundle:Chart:new.html.twig', array(
      'entity' =&gt; $entity,
      'form' =&gt; $form-&gt;createView(),
      'errors' =&gt; json_encode($errors),
  ));
  
  //new.html.twig
  &lt;script type="text/javascript"&gt;
  var errors = {{errors}};
  //WHETHER I USE A FOR LOOP
  for(var err in errors){
      alert(err);
  }
  //OR AN **$.EACH()** FUNCTION
  $.each(errors, function(k,v){
      alert(k);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>ERROR:  </p>
  
  <pre><code>SyntaxError: invalid property id
  </code></pre>