如何将数据从 controller 传递到 javascript？

Question

On my index page I have button for redirecting to teachers page.

index.html :

Here I have button <button id="getAllTeachers" type="button" class="btn btn-primary">Teachers</button> and also I have one script here:

 <script>
    document.querySelector('#getAllTeachers')
        .addEventListener('click',() => {
            window.location.href = "/teacherController/check" 
        });
</script>

When I click on button above, sure, it redirects to my TeacherController class and below I attached the code from controller and my attempt for passing parameters to html page:

RestController
@RequestMapping("/teacherController")
public class TeacherController {
private static final String TEACHER_MODEL = "teacher";
@Autowired
TeacherService teacherService;


@RequestMapping("check")
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject(teacherService.getAll());
    modelAndView.setViewName("/teacherViews/teachersPage");
    return modelAndView;
}

teacherViews/teachersPage :

<script src="/getTeachers.js"></script>
<div class="container">
<table class="teacherTable" border="1" width="100%" cellpadding="5">
    <thead>
    <th>TEACHER ID</th>
    <th>TEACHER NAME</th>
    <th>TEACHER POSITION</th>
    <tbody id="teacherBody">

    </tbody>
</table>

And getTeachers.js :

GET: $(document).ready(
function () {

    // GET REQUEST
    $("#getAllTeachers").click(function (event) {
        event.preventDefault();
        ajaxGet();
    });

    // DO GET
    function ajaxGet() {
        $.ajax({
            type: "GET",
            url: "teacherController/check",
            success: function (result) {
                if (result.status == "success") {
                    var custList = "";
                    $.each(result.data,
                        function (i, teacher) {

                            var Html = "<tr>" +
                                "<td>" + teacher.teacherId + "</td>" +
                                "<td>" + teacher.teacherName + "</td>" +
                                "<td>" + teacher.position + "</td>" +
                                "</tr>";
                            console.log("Teacher checking: ", teacher);
                             $('#teacherBody').append(Html);

                        });
                    console.log("Success: ", result);
                } else {
                    console.log("Fail: ", result);
                }
            },
            error: function (e) {
                console.log("ERROR: ", e);
            }
        });
    }
})

My problem is that I need to print all teachers that I have in my database but it prints only the name of table columns without data..

Answer 1

It is a good idea to give the object identifier that your Controller check method returns. (I could not understand what you are trying to do with Ajax.)

modelAndView.addObject("teachers", teacherService.getAll());

The table on which you show the teachers should be like this.

<table>
    <thead>
        <tr>
            <th>Teacher ID</th>
            <th>Teacher Name</th>
            <th>Teacher Position</th>
        </tr>
    </thead>
    <tbody id="teacherBody">
        <tr th:each="teacher : ${teachers}">
            <td th:text="${teacher.id}" />
            <td th:text="${teacher.name}" />
            <td th:text="${teacher.position}" />
        </tr>
    </tbody>
</table>