traverse twig array in javascript block

Question

Using Symfony2.3.4 and PHP5.6.3.

I need to THE TITLE.

See, I have this template

{#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 %}

    <FORM class="form-horizontal" action="{{path('chart_create', { 'id' : entity.id })}}"
          method="post" {{ form_enctype(form) }}>
        <center><h3>Create chart</h3></center>

        {{ form_widget(form) }}
        <DIV class="form-actions">
            <BUTTON name="submit" type="submit"
                    class="btn btn-primary"><I class="glyphicon-check"></I>
                {{ 'Save'|trans }}</BUTTON>
            <a class="btn" href="{{ path('chart') }}">
                <I class="glyphicon-ban"></I> {{ 'Cancel'|trans }}</a>
        </DIV>
    </FORM>
{% endblock %}
{% block javascripts %}
    {{parent()}}
    {% if errors is defined %}
    <script type="text/javascript">
        alert({{errors}}); //THIS DOESN'T WORK, JUST SO U KNOW WHAT I NEED
    </script>
    {% endif %}
{% endblock %}

The variable errors is a simple array structured: $key --> <fieldname> and
$value --> <errormessage>, this varible comes from the controller,
so far so normal.

Now, I need to use that array in the js block to alert the error or tooltip it or what ever but I need to access its keys and values like, say, with the .each() function.

SAMPLE ERROR:

array (size=1)
  'CI' => 'CI must be unique'

EDIT:

array (size=2)
  'CI' => string 'CI must be unique' (length=53)
  'height' => string 'This value is not valid.' (length=24)

This is what an error looks like when I {{dump(errors)}} in the template.

Look, I could 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 "knowledge bag", corny as it sounds...

if you could please show some code with the ideas in your comments...

EDIT2:

I tried the json_encode like this:

ChartController.php
$errors = array();
        foreach ($form as $field) {
            if ($field->getErrors()) {
                $errors [$field->getName()] = $field->getErrors();
                $errors[$field->getName()] = $errors[$field->getName()][0]->getMessage();
            }
        }

        return $this->render('GCBundle:Chart:new.html.twig', array(
                    'entity' => $entity,
                    'form' => $form->createView(),
                    'errors' => json_encode($errors),
        ));

Now when I {{dump(errors)}} in the template it outputs:

string '{"CI":"CI must be unique","height":"This value is not valid."}' (length=102)

and my actual javascript block:

new.html.twig
{% block javascripts %}
    {{parent()}}
    {{dump(errors)}}
    {% if errors is defined %}
    <script type="text/javascript">
        var temp = {{errors}};
        $.each(temp, function(k,v){
            alert(k);
        });

    </script>
    {% endif %}
{% endblock %}

I need to traverse it somehow but if I use the code above, the browser's console outputs this js error:

SyntaxError: invalid property id

EDIT3:

I checked your link but although it serializes the $errors OK, it doesn't say anything about outputing those errors in a javascript block which is what I actually need.

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:

1-

//With the serializer
//ChartController.php
$errors = $this->get('form_serializer')->serializeFormErrors($form, true, true);

        return $this->render('GCBundle:Chart:new.html.twig', array(
                    'entity' => $entity,
                    'form' => $form->createView(),
                    'errors' => $errors,
        ));

//new.html.twig
<script type="text/javascript">
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);
});
</script>

ERROR:

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.

2-

//Without the serializer
//ChartController.php
$errors = array();
foreach ($form as $field) {
    if ($field->getErrors()) {
        $errors [$field->getName()] = $field->getErrors();
        $errors[$field->getName()] = $errors[$field->getName()][0]->getMessage();
    }
}

return $this->render('GCBundle:Chart:new.html.twig', array(
    'entity' => $entity,
    'form' => $form->createView(),
    'errors' => json_encode($errors),
));

//new.html.twig
<script type="text/javascript">
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);
});
</script>

ERROR:

SyntaxError: invalid property id

What does the actual HTML source look like in the `script` tag when there is an error? — jwatts1980, Jun 09 '15 at 18:42
Also, you mention using `.each()`. Does that mean you are using jQuery? If so, please tag it in the question. — jwatts1980, Jun 09 '15 at 18:43
@jwatts1980: I don't understand first comment and just added the tag — Scaramouche, Jun 09 '15 at 18:48
I assumed based on what you were saying that you are not getting a PHP error, but rather an error in the JavaScript. If that is the case, Then that means `{{errors}}`, if defined, is actually writing something out to the HTML document. I would like to know what the actual resulting document text looks like in the scenario that `errors` is defined. Is that possible? — jwatts1980, Jun 09 '15 at 19:10
You can create a json object with the [json_encode](http://twig.sensiolabs.org/doc/filters/json_encode.html) pipe , it will more easy for you. — BENARD Patrick, Jun 09 '15 at 19:27
You are trying to cast an array to string, which throws an notice/warning. You will need to foreach the array into a proper javascript parameter or convert it to json as Yenne said — DarkBee, Jun 09 '15 at 21:46
@jwatts1980: there's the error sample, I hope that's what you meant — Scaramouche, Jun 11 '15 at 15:34
I used the json_encode, please take a look at my edit, thanks — Scaramouche, Jun 11 '15 at 15:54
I added an answer using `json_encode`, then I saw your edits. I think that is the best way to go. — jwatts1980, Jun 11 '15 at 16:03
I deleted my answer. I don't know what I was thinking, The function call needs to be in the controller not the template. I think you are pretty close on this, though. — jwatts1980, Jun 11 '15 at 16:21
See if this SO querstion/answer is helpful: http://stackoverflow.com/questions/24556121/how-to-return-json-encoded-form-errors-in-symfony — jwatts1980, Jun 11 '15 at 16:30
@jwatts1980: please take a look at my 3rd edit, thanks for ur help — Scaramouche, Jun 11 '15 at 17:34
@jwatts1980: thanks a lot for ur effort, check my answer, I found it in another SO question. — Scaramouche, Jun 11 '15 at 19:24

Scaramouche · Accepted Answer · 2020-03-26T21:16:54.913

Here I found my answer at last, when I could finally identify the source of the problem thanks to FireBug.

In the controller I did the same without the serializer:

        $errors = array();
        foreach ($form as $field) {
            if ($field->getErrors()) {
                $errors [$field->getName()] = $field->getErrors();
                $errors[$field->getName()] = $errors[$field->getName()][0]->getMessage();
            }
        }

        return $this->render('GCBundle:Chart:new.html.twig', array(
                    'entity' => $entity,
                    'form' => $form->createView(),
                    'errors' => $errors,
        ));

and in the template:

<script type="text/javascript">
    function getJSonObject(value) {
        return $.parseJSON(value.replace(/&quot;/ig, '"'));
    }

    var storeJSON = getJSonObject("{{errors|json_encode()}}");

    $.each(storeJSON, function(k,v){
        alert('Key = ' + k + '\n' + 'Value = ' + v);
    });
</script>

The problem was that each() was not dealing very well with ", so as soon as I do this to errors:

getJSonObject("{{errors | json_encode()}}"),

VOILÀ!!! each() works OK.

I figured it was going to come down to something simple. – jwatts1980 Jun 11 '15 at 22:39 — jwatts1980, Jun 11 '15 at 22:39

score 4 · Answer 2 · edited May 23 '17 at 12:00

4

As mentioned in this SO answer, you could also use another filter that will do that you want:

{{ errors|json_encode|raw }}

edited May 23 '17 at 12:00

Community

1
1

answered Nov 29 '16 at 14:40

Jérémy Cornut

61
4

score 0 · Answer 3 · answered Aug 15 '17 at 19:18

A posible solution could be convert an array twig to an array Javascript

<script>
    var errors = new Array();

        {% for error in errors %}

           errors.push({
                    name    : '{{error.name}}',
                    priority: '{{error.priority}}',
                    image    : '{{error.image}}',
                });

        {% endfor %}
<script>

score 0 · Answer 4 · answered Jun 26 '18 at 13:56

0

If you want to keep your syntax highlighter working correctly, join the array with a pipe and then split it again on the pipe.

        var toString = "{{ yourArray|join('|') }}";
        var yourArray = toString.split('|');

answered Jun 26 '18 at 13:56

Julesezaar

2,658
1
21
21

traverse twig array in javascript block

4 Answers4