jQuery-如何填充实体关系数据

Question

我正在自学JQuery和UI。

我有两个实体：

1. AppUser

@Entity 
@Table(name = "app_user")
@ManyToMany(fetch = FetchType.LAZY)
@JoinTable(...)
private List<AppRole> roles;

1. AppRole

@Entity
@Table(name = "app_role")
private Integer id;
private String name;

在JSP上，我可以使用以下命令获取角色名称：

<c:forEach items="${user.roles}" var="list">${list.name}</c:forEach>

我要实现的目标是-以引导模式显示角色中的用户详细信息。

我尝试了以下建议的here（其他很多方法）。

for (var i = 0; i < userroles.length; i++) {
    $('#roleslist').append(
    '<option value="' + userroles[i] + '">'
    + userroles[i]
    + '</option>');
}

这使我接近要实现的目标，但它使我在下拉列表中的对象列表看起来很奇怪，如下所示：

[com.spring.boot.rocks.model.AppRole[ id=1 ], com.spring.boot.rocks.model.AppRole[ id=2 ], com.spring.boot.rocks.model.AppRole[ id=3 ]]

问题：在上述情况下，如何使用JQuery获取角色名称？有什么方法可以显示/填充具有角色ID和角色名称的下拉菜单？

我知道某个地方存在很大的脱节，但这方面的任何线索都会有所帮助。