How to get a value on angular typescript in json - arrays

Question

Here is my json respond using laravel spatie I created a respond that show if the user is have an Roles
{
"message": "Successfuly fetch all User",
"error": false,
"error_code": 200,
"line": "line 117 UserController.php",
"data": [
{
"id": 1,
"name": "dasdsa",
"email": "dasdsad#gmail.com",
"email_verified_at": null,
"created_at": "2020-04-22T13:37:41.000000Z",
"updated_at": "2020-04-22T13:37:41.000000Z",
"roles": [
{
"id": 2,
"name": "publisher",
"guard_name": "web",
"created_at": "2020-04-23T11:11:33.000000Z",
"updated_at": "2020-04-23T11:11:33.000000Z",
"pivot": {
"model_id": 1,
"role_id": 2,
"model_type": "App\\User"
}
}
]
},
{
"id": 2,
"name": "mdsadsadn",
"email": "dasdsad#gmail.coms",
"email_verified_at": null,
"created_at": "2020-04-23T10:37:10.000000Z",
"updated_at": "2020-04-23T12:04:46.000000Z",
"roles": [
{
"id": 2,
"name": "publisher",
"guard_name": "web",
"created_at": "2020-04-23T11:11:33.000000Z",
"updated_at": "2020-04-23T11:11:33.000000Z",
"pivot": {
"model_id": 2,
"role_id": 2,
"model_type": "App\\User"
}
}
]
}
]
}
and this is my code on angular 9.1.3 to get the value name in roles array
export class UserComponent implements OnInit {
roles:any;
result:any;
constructor(private _userService:UsersService) { }
ngOnInit(): void {
this.getallUser();
}
getallUser(){
this._userService.getallUsers().subscribe((event : HttpEvent<any>) => {
if (event.type === HttpEventType.Response) {
if (event.status == 200) {
let body = event.body;
let error = body.error;
let msg = body.message;
//alert(body);
// console.log(body.data);
if (!error) {
this.dataTbl.tblVal = body.data
this.roles = body.data.roles;
console.log(this.roles)
// this.result = this.roles.map(a => a.roles);
// console.log(this.result);
// console.log(this.dataTbl.tblVal)
}
}
}
this.dataTbl.tblLoad = false;
}, (err : HttpErrorResponse) => {
console.log(err);
});
}
}
Here is my service
import { Injectable } from '#angular/core';
import { HttpClient, HttpRequest, HttpHeaders } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class UsersService {
constructor(private _httpClient: HttpClient) {
}
getallUsers() {
return this._httpClient.get("http://localhost:8000/api/getallUser", {
observe: 'response', reportProgress: true });
}
}
My problem is I want to get the value of name in roles example:publisher but i cannot access on that object how to get that value the error is undefined I dont know what's wrong with my code thank you for the help