'How can I bind an array of data to html table using Spring boot REST apllication and not by Spring MVC

I have a Spring Boot REST application, in which one of the REST API sends mail to the respective users.

I have designed a mailer template in Html and my rest API has data in an array which I am binding to an Html table using and tags.

How can I bind an array of data to Html table using Spring Boot REST application and not by Spring MVC

1. HTML code

    <tr>
                        <td style="padding: 20px 18px 0; color: #888686; font-size: 15px; font-family: 'Open Sans';">
                            <table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            DATE</th>
                                            <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            AVAILABILITY</th>
                                            <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            WORK START TIME</th>
                                             <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            WORK END TIME</th>
                                             <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            BREAK START TIME</th>
                                             <th
                                            style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">
                                            BREAK END TIME</th>
                                    </tr>
                                    <c:forEach var="oldList" items="${scheduleDetailsOld}">
                                    <tr>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.day}</td>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.availability}</td>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workStartTime}</td>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.workEndTime}</td>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakStartTime}</td>
                                        <td style="padding: 8px 20px; border: 1px solid #eeeeee; background: #ffffff; color: #888686; font-size: 15px; font-family: 'Open Sans'; width: 35%;">${oldList.breakEndTime}</td>
                                    </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </td>
                    </tr>

2.email sender method

public void shiftUpdatedMailForEditor(Staff staff) {
        new Thread(() -> {
            try {
                Map<String, String> values = new HashMap<>();
                values.put("getName", staff.getName());
                values.put("getSubject", "Work schedule details have been modified.");
                mailerService.sendStaffShiftUpdatedForEditorEmail(values, staff.getEmail());
            } catch (PaperTrueException e) {
                e.printStackTrace();
            }
        }).start();
    }

3. get HTML temlate service

    protected void sendStaffShiftUpdatedForEditorEmail(Map<String, String> valuesMap, String receiverEmail)
                throws PaperTrueJavaException {
            // concerned Editor (receiverEmail)
            System.out.println("Inside sendStaffShiftUpdatedForEditorEmail");
            mailer.sendMail("[email protected]", "[email protected]", valuesMap.get("getSubject"),
                    formatHtml(getHTMLBody(HtmlTemplateURL), valuesMap));
        }

4. here is my controller
    
    @PostMapping("/update-schedule-details")
                public ResponseEntity<StatusResponse> updateScheduleDetails(@Valid @RequestBody addScheduleDetailsBody body,
                        Model model) {
                    StatusResponse statusResponse = new StatusResponse();
                    try {
                        util.isStaffLoggedIn(request, response, List.of(StaffRole.EDITOR, StaffRole.HR_MANAGER));
                        Iterator<AddScheduleDetails> iterator = body.getScheduleDetails().iterator();
                        ArrayList<ScheduleDetails> scheduleDetailsNew = new ArrayList<ScheduleDetails>();
                    ArrayList<ScheduleDetails> scheduleDetailsEarlier = new ArrayList<ScheduleDetails>();
                    while (iterator.hasNext()) {
                        AddScheduleDetails addScheduleDetails = (AddScheduleDetails) iterator.next();
                        if (scheduleDetailsService.getShift(new Date(addScheduleDetails.getDay()),
                                addScheduleDetails.getEditorId())) {
                            addScheduleDetails(addScheduleDetails);
                        } else {
                            scheduleDetailsEarlier = updateScheduleDetails(addScheduleDetails, scheduleDetailsEarlier);
                        }
                        ScheduleDetails scheduleDetails = scheduleDetailsService.get(new Date(addScheduleDetails.getDay()),
                                addScheduleDetails.getEditorId());
                        scheduleDetailsNew.add(scheduleDetails);
                    }
                    model.addAttribute("scheduleDetailsOld", scheduleDetailsEarlier);
                    model.addAttribute("scheduleDetailsNew", scheduleDetailsNew);
                        emailSender.shiftUpdatedMailForEditor(util.getLoggedInStaff(request));
                        statusResponse.setStatus(new Status("Editor Schedule Details Updated Successfully"));
                    } catch (PaperTrueException e) {
                        util.logException(e, LogType.GET_JOBS);
                        statusResponse.setStatus(new Status(e.getCode(), e.getMessage()));
                    }
                    return ResponseEntity.ok(statusResponse);
                }


Solution 1:[1]

If you use some standard library like Datatables, it will be much easier.
See this, https://datatables.net/reference/option/ajax.data
This way, you can just send json data from your REST API in response

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chetan Ahirrao