I am having trouble updating the role of a user. In my database, I have a user table and a role table with a ManyToMany relation. I can retrieve all the values and even the correct selected value, but I am encountering issues when trying to update it.
Here is the User model:
export class User {
constructor(
public id: number,
public firstname: String,
public lastname: String,
public username: String,
public password: String,
public roles: Role
) { } }
And here is the Role model:
export class Role {
constructor(
public id: number,
public name: String
){}}
This is the Edit component:
export class AdminEditUserComponent implements OnInit {
roles: Array<Role> = [];
users = [];
constructor(private _adminService: AdminService, private router: Router) { }
userForm = new FormGroup(
{
id: new FormControl(this._adminService.getUser().id),
firstname: new FormControl(this._adminService.getUser().firstname, Validators.required),
lastname: new FormControl(this._adminService.getUser().lastname, Validators.required),
username: new FormControl(this._adminService.getUser().username, Validators.required),
password: new FormControl(this._adminService.getUser().password),
selectedRole: new FormControl(this._adminService.getUser().roles, Validators.required)
}
);
getRoles(): void {
this._adminService.getRoles().subscribe(
result => {
this.roles = result;
}
)
}
initfunc(): void {
this.getRoles();
this._adminService.getRoles().subscribe(
result => {
this.roles = result;
}
)
}
ngOnInit(): void {
this.initfunc();
this._adminService.getUsers().subscribe(users => {
this.roles = [... new Set(users.map(user => user.roles))];
console.log(this.roles);
})
}
submitted: boolean = false;
onSubmit() {
let rolToUpdate = new Role(this.userForm.get("selectedRole").value, "");
let userToUpdate = new User(this.userForm.get("id").value, this.userForm.get("firstname").value, this.userForm.get("lastname").value, this.userForm.get("username").value, this.userForm.get("password").value, rolToUpdate);
this.submitted = true;
this._adminService.putUser(userToUpdate).subscribe();
setTimeout(() => {
this.router.navigate(["/admin/users"]);
}, 1000);
}
btnReturn() {
this.router.navigate(["/admin/users"])
}
}
Here is the html code for selecting the role:
<div class="form-group">
<select formControlName="selectedRole" class="form-control">
<option *ngFor="let role of roles" ngValue="{{role.id}}" selected="{{role.id}}">
<div ngValue="role">{{role.name}}</div>
</option>
</select>
</div>
When retrieving the role from the database, it appears in json format like this:
However, when attempting to update it, it looks like this:
This is the error message I receive when trying to update:
JSON parse error: Cannot deserialize instance of JSON parse error: Cannot deserialize instance of `java.util.HashSet<com.example.f1codingbackend.model.Role>` out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `java.util.HashSet<com.example.f1codingbackend.model.Role>` out of START_OBJECT token↵ at [Source: (PushbackInputStream); line: 1, column: 161] (through reference chain: com.example.f1codingbackend.model.User["roles"])
It seems that the role array is not formatted correctly for updating. Can someone please provide insight on what might be wrong and how to resolve this issue?