Страницы

Поиск по вопросам

вторник, 9 июля 2019 г.

Как отобразить полученный результат в таблице при помощи Handlebars.js и jQuery

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

Username Role First name Last name Email Notes Active State

Темплейт:
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 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 } ]
Проблема в том что не отображается содержимое в таблице и ошибки в браузере так же нет. Помогите найти что не так. Спасибо.


Ответ

Начнем с того что 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

Комментариев нет:

Отправить комментарий