在JavaScript块中遍历Twig数组

5

使用Symfony2.3.4和PHP5.6.3。

我需要标题

看,我有这个模板

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

变量errors是一个简单的数组,结构为:$key --> <fieldname>$value --> <errormessage>,此变量来自控制器,到目前为止很正常。
现在,我需要在js块中使用该数组来alert错误或提示它或者其他什么,但我需要像使用.each()函数一样访问它的键和值。
示例错误:
array (size=1)
  'CI' => 'CI must be unique'

编辑:

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

这是在模板中使用{{dump(errors)}}所显示的错误信息。
看起来,我可以想到一个解决方法(例如),将数组拆分为两个数组(一个包含键,另一个包含值),并为其生成自动整数索引,这样就可以通过for循环遍历它,而不是使用.each()函数,但我认为这是将其添加到“知识库”中的好时机,尽管听起来有些陈词滥调...
如果您能展示一些代码,并结合您在评论中提到的想法,那就太好了...
编辑2:
我尝试过这样使用json_encode
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),
        ));

现在在模板中使用{{dump(errors)}}输出结果如下:
string '{"CI":"CI must be unique","height":"This value is not valid."}' (length=102)

以下是我的实际javascript代码块:

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

我需要以某种方式遍历它,但如果我使用上面的代码,浏览器控制台会输出此js错误:

SyntaxError:无效的属性id

编辑3:

我检查了你的链接,尽管它可以正确序列化$errors,但它并没有说明如何在javascript块中输出这些错误,这正是我实际需要的。

看看我尝试的所有方法,希望您可以从我得到的错误中得出一些结论:

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>

错误:

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>

抱歉,发生了错误。
SyntaxError: invalid property id

当出现错误时,script标签中的实际HTML源代码是什么样子? - jwatts1980
1
你可以使用 json_encode 管道创建一个 JSON 对象,这样会更加方便。 - BENARD Patrick
你正在尝试将一个数组转换为字符串,这会抛出一个警告。你需要将该数组遍历成一个适当的JavaScript参数或者像Yenne所说的那样将其转换为JSON。 - DarkBee
@jwatts1980:这是错误示例,我希望这就是你想要的。 - Scaramouche
1
请查看这个 Stack Overflow 的问题/回答是否有帮助:https://dev59.com/v2Af5IYBdhLWcg3wgzDI - jwatts1980
显示剩余8条评论
4个回答

6

这里最终让我找到了答案,感谢FireBug帮助我确定了问题的来源。

在控制器中,我没有使用序列化程序就做了同样的事情:

        $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,
        ));

在模板中:

<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>

问题在于each()无法很好地处理&quot;,因此当我对errors执行以下操作时:

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

完美!each()正常工作。


我想这归根结底是件简单的事情。 - jwatts1980

4

正如在这个SO答案中提到的,你也可以使用另一个过滤器来实现你想要的功能:

{{ errors|json_encode|raw }}

0
如果您想让语法高亮显示器正常工作,请使用管道符号将数组连接,然后再根据管道符号拆分它。
        var toString = "{{ yourArray|join('|') }}";
        var yourArray = toString.split('|');

0
一个可能的解决方案是将Twig数组转换为JavaScript数组。
<script>
    var errors = new Array();

        {% for error in errors %}

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

        {% endfor %}
<script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接