3

Помогите найти ошибку. Имеется таблица:

<table>
        <thead>
        <tr>
            <th>Username</th>
            <th>Role</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Notes</th>
            <th>Active State</th>
        </tr>
        </thead>
        <tbody id="user-list">
        <script id="user-records" type="text/x-handlebars-template">
            {{#each user}}
            <tr>
                <td>{{username}}</td>
                <td>{{role}}</td>
                <td>{{firstName}}</td>
                <td>{{lastName}}</td>
                <td>{{email}}</td>
                <td>{{notes}}</td>
                <td>{{activeState}}</td>
            </tr>
            {{/each}}
        </script>
        </tbody>
    </table>

Темплейт:

    var USER_METHOD ={

        handlerData:function(resJSON){

            var templateSource = $("#user-records").html(),

                template = Handlebars.compile(templateSource),

                studentHTML = template(resJSON);

           $('#user-list').html(studentHTML);

        },
        loadUserData : function(){

            $.ajax({
                url:"/users",
                method:'get',
                success:this.handlerData

            })
        }
};

$(document).ready(function(){

    USER_METHOD.loadUserData();
});

Ну и сам запрос:

@RestController
@RequestMapping("/users")
public class UsersController {

    @Autowired
    private UserRepository repo;

    @RequestMapping(method=RequestMethod.GET)
      public List<User> getAll() {
        return repo.findAll();
      }
}

Через Postman результат в таком виде:

    [
  {
    "id": 1,
    "username": "admin",
    "password": "1234",
    "role": "ADMIN",
    "firstName": "alex",
    "lastName": "тест",
    "email": "alex@test.com",
    "notes": "test notes",
    "activeState": 1
  }
]

Проблема в том что не отображается содержимое в таблице и ошибки в браузере так же нет. Помогите найти что не так. Спасибо.

1 ответ 1

2
+50

Начнем с того,
что handlebars темплейт ожидает данными javascript объект, а не строку.
Поэтому нужно убедиться, что результат (который всегда летает по сети как строка) попарсили в нормальный js-объект.
Для этого надо рассказать jquery, что результатом запроса будет JSON строчкой
dataType: 'json'.
jQuery конечно умный и обычно сам догадывается, но все равно лучше в этом убедиться.

$.ajax({
    url:"/users",
    method:'get',
    success:this.handlerData,
    dataType: 'json'
})

Теперь ближе к делу, с минимальными правками в вашем коде:

Способ 1: слегка поменять шаблон.
Строку {{#each user}} на {{#each this}}

Способ 2: слегка поменять передачу параметров при создании шаблона:
Вместо studentHTML = template(resJSON); Нужно studentHTML = template({user: resJSON});

Как Вы можете догадаться из кода, ну не знает Handlebars что такое user и откуда его взять из вашего массива для заполнения шаблона.
В первом способе мы вместо "бери user" говорим "бери эту штуку", во втором - рассказываем что такое user.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.