I'm using Java Spring Boot for the backend, and Thymeleaf for the frontend. I'm using an API to retrieve and display thousands of images. What I am getting as a response is one JSON object that has thousands of subobjects that each has a link to the image.
I would like to send this big JSON object to the frontend. I'm trying to make an image slider. When I click the '>' button, the next image would appear. '<' button would show the previous image.
This is how I am sending an API response to the frontend. 'model' is an instance of ModelMap.
model.put("apiResponse", apiResponse);
apiResponse object is now accessible from the frontend HTML file. However, I'm not sure how I could manipulate this with JavaScript. Is it that all Java objects can't be handled using JavaScript directly?
In that case, is the best practice to use some kind of library to convert Java objects to JSON? I was wondering if I should do it because it sounds a bit weird:
Isn't it weird that original data is JSON but I have to go through so many steps to make it back to the JSON? Is this really how things work? If not, what's a better way of doing things?
I solved this issue by using Thymeleaf Script Inlining, as suggested by its official documentation.
<script th:inline="javascript">
/*<![CDATA[*/
var apiResponse = /*[[${apiResponse}]]*/ 'apiResponse';
/*]]>*/
</script>
After that, I was able to access the apiResponse variable in the external js file as well.