Symfony rendering templates from ajax - php

Question

I have the following ajax I call:
$('.checkbox').click(function () {
$.ajax({
type:'POST',
url: '/loadProducts',
data: {},
success: function(response) {
$('.js-products').html(response);
}});
return false;
});
Now when I call my endpoint loadProducts, I wants to get products, render a product template(s) and return all of them.
In my endpoint I could do this:
/**
* #Route("/loadProducts", name="loadProducts")
*/
public function loadProducts() {
/* #var \AppBundle\Service\ProductService $productService */
$productService = $this->get('app.product');
$products = $productService->getProducts();
$productItems = [];
foreach ($products as $product) {
$productItems = $this->render('home/productItem.html.twig', [
'product' => $product
]);
}
$response = new Response();
$response->headers->set('Content-Type', 'application/json');
$response->setContent(json_encode($productItems));
return $response;
}
But that only renders one product. How could I return rendering multiple product.html.twig files? (apart from creating a new template that renders all)

Answer 1

You will get something like this. Your action will start to render products.html.twig which have a loop that renders multiple times product.html.twig
products.html.twig
{% extends base_template %}
{% block body %}
<div class="container">
<div class="row">
{% for product in products %}
<div class="col-md-3">
{% include 'shop/product.html.twig' %}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
product.html.twig
<div class="product">
<img src="somesource.jpg">
<div class="description">
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
</div>
</div>