求助 Thymeleaf List中不同对象的数据拼接显示。

现有如下数据结构，一个用户有两个角色，两个角色名称，需要“,”拼接隔开显示，如：“管理员,用户1”
如下图显示样子：

 {
  "userId": 25,
  "username": "lisi0",
  "age": 28,
  "roles": [
    {
      "roleId": 1,
      "roleName": "管理员",
      "roleDesc": "最大"
    },
    {
      "roleId": 2,
      "roleName": "用户1",
      "roleDesc": "第二"
    }
  ]
}

但目前我知道的Thymeleaf 写法只能输出userId、username等用户信息和roles整个集合，如下图：

请教大神，Thymeleaf 如何写才能将roles中的两个roleName进行逗号拼接后显示在一个单元格内，如第一幅图那样显示。

         var userObj =  {
                  "userId": 25,
                  "username": "lisi0",
                  "age": 28,
                  "roles": [
                    {
                      "roleId": 1,
                      "roleName": "管理员",
                      "roleDesc": "最大"
                    },
                    {
                      "roleId": 2,
                      "roleName": "用户1",
                      "roleDesc": "第二"
                    }
                  ]
        }
        var rolesObj = userObj.roles;
        var roleName = "";
        for (var i=0;i<rolesObj.length;i++){
            var role = rolesObj[i];
            roleName +=role.roleName+",";
        }
        roleName = roleName.substring(0,roleName.length-1);
        console.log(roleName);

首先，根据thymeleaf官方样例代码程序，
推荐在Controller层做

@ModelAttribute("users")
public List<User> populateUsers() {
        return this.userService.findAll();
    }

然后使用ORM框架做一对多的查询

User实体类中包含

List<Role> roles;

Controller中直接返回渲染模板的路径String
然后在表格中做如下添加：

<td th:if="${user.roles} != null">
    <span th:each="role: ${user.roles}">
            <span th:text="${role.roleName}">, </span>
    </span>
</td>