使用ajax的Symfony3刷新模板

Question

我尝试使用ajax在twig模板中更新PHP foreach循环的变量，但没有成功。

这是我的模板：

{% extends 'base.html.twig' %}

{% block content %}
    <div class="uk-container uk-container-large">
        <div class="uk-child-width-expand@s uk-text-center" uk-grid>
        {% for article in articles %}

                <div class="uk-width-1-6@xl uk-width-1-5@l uk-width-1-4@m uk-width-1-3@s">
                    <div class="uk-card uk-card-default">
                        <div class="uk-card-media-top">
                            <img id="image" src="{{ vich_uploader_asset(article, 'imageFile') | imagine_filter('article_thumb') }}" alt="{{ article.name }}">
                        </div>
                        <div class="uk-card-body">
                            <h3 id="name" class="uk-card-title">{{ article.name }}</h3>
                            <p id="description">{{ article.description | truncate(40) }}</p>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

这是我的javascript：

       $.ajax({
            type: 'GET',
            url: Routing.generate("ajax_request"),
            data: { brand: selectedBrand }
            //dataType: 'json'
        }).done(function (data) {
            for (i=0;i<data.length;i++) {
                $('#image').html(data[i].image);
                $('#name').html(data[i].name);
                $('#description').html(data[i].description);

            }
        })

修改

由于我找到了一个有效的解决方案，但由于VichUploaderBundle我不知道如何显示图像，你有什么想法吗？

        $.ajax({
            type: 'GET',
            url: Routing.generate("ajax_request"),
            data: { brand: selectedBrand }
            //dataType: 'json'
        }).done(function (data) {

            $('.uk-text-center').children().html('');
            var htmlText = '';

            for ( var key in data ) {
                htmlText += '<div class="uk-width-1-6@xl uk-width-1-5@l uk-width-1-4@m uk-width-1-3@s">';
                htmlText += '<div class="uk-card uk-card-default">';
                htmlText += '<div class="uk-card-media-top">';
                htmlText += "<img src='{{ vich_uploader_asset(article, \'imageFile\') | imagine_filter(\'article_thumb\') }}' alt='{{ article.name }}'>";
                htmlText += '</div>';
                htmlText += '<div class="uk-card-body">';
                htmlText += '<h3 class="uk-card-title">' + data[key].name + '</h3>';
                htmlText += '<p>' + data[key].description + '</p>';
                htmlText += '</div>';
                htmlText += '</div>';
                htmlText += '</div>';
            }

            $('.uk-text-center').html(htmlText);
        })

这是我的ajax函数的“完成”承诺中我的JSON数据的调试：

[
    {"id":207,"name":"article 5","category":"sweat","brand":"adidas","model":"boze","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":61,"size":"M","price":34,"image":"ceinture.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
    {"id":209,"name":"article 7","category":"sous-vêtements","brand":"adidas","model":"running","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":53,"size":"M","price":100,"image":"IMG_7846.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
    {"id":220,"name":"article 18","category":"chaussures","brand":"adidas","model":"running","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":3,"size":"M","price":14,"image":"black_sweat.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
    {"id":229,"name":"article 27","category":"sweat","brand":"adidas","model":"boze","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":54,"size":"M","price":63,"image":"blue_jeans.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
    {"id":231,"name":"article 29","category":"pantalons","brand":"adidas","model":"smoked","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":96,"size":"L","price":16,"image":"black_sweat.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
    {"id":232,"name":"article 30","category":"chaussures","brand":"adidas","model":"boze","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":99,"size":"XXL","price":56,"image":"black_pants.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null}
]