Spring Boot+Thymeleaf: load data from DB into iframe - mysql

Question

on the home page of my dummy webapplication I want to display the top 5 sellers and the newest product. For this I am using a slide show. The slide show is already implemented. For the slides I want to use embedded HTML files with help of iframe tags. These embedded HTML files should display data loaded from mysql database.
The problem: how can I add a java entity to an iframe instead of adding it as an object to the ModelAndView? Is this even possible? Code snippet of the Spring controller (for loading the home page):
#RequestMapping(value={"","/"}, method = RequestMethod.GET)
public ModelAndView showHomePage() {
ModelAndView mv = new ModelAndView();
mv.setViewName("home");
List<ProductCategoryModel> productList = this.productRepository.getAllProductsByProductCategoryModel();
mv.addObject("productList",productList);
return mv;
}
Here I was adding all products as a list object to the home page view. Now inside the home.html, I would like to pass that list object to the iframe, but how? Here is the code snipped of the iframe (which is inside the div with id=slides__1):
<section>
<div class="slider-container">
<div class="slider">
<div class="slides">
<div id="slides__1" class="slide">
<iframe src="iframes/test.html" title="Top 5 Sellers"></iframe>
<a class="slide__prev" href="#slides__4" title="Next"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div id="slides__2" class="slide">
<span class="slide__text">2</span>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div id="slides__3" class="slide">
<span class="slide__text">3</span>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div id="slides__4" class="slide">
<span class="slide__text">4</span>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Prev"></a>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
</section>
And now the HTML page (code snippet of the section) I want to embedd as iframe and that should load all products into a table. In this view I will access the list object with all products:
<section>
<div class="container">
<br><br><br>
<table class="table table-bordered table-striped" id="product-table">
<thead>
<tr>
<th>Image</th>
<th>Product Id</th>
<th>Category</th>
<th>Product Description</th>
<th>Price in $</th>
<th>Image Source</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr th:each="product: ${productList}">
<td><img th:src="${product.productImgSource}" alt="productImg" width="50" height="50"></td>
<td th:text="${product.productId}"></td>
<td th:text="${product.categoryText}"></td>
<td th:text="${product.productDescription}"></td>
<td th:text="${product.productPrice}"></td>
<td th:text="${product.productImgSource}"></td>
<td th:text="${product.enabled}"></td>
</tr>
</tbody>
</table>
</div>
</section>
Note: finding the top 5 sellers is not implemented yet, I just wanted to test it first with all products. Thanks in advance for any advice.