how to loop by loop json data object in angular 5 - angular5

Question

i am going bind my local json data object in html one matcard having menu item the menu item inside two matcard such as i.e totalUser is one matcard having menuitem then menu item having Activeuser matcard, InActiveUser matCard, but this json data not comming console only how to get that one
report.json:-
{
"groupCode": 0,
"userType": 0,
"totalUsers": {
"totalUser": 33,
"userDetails": {
"activeUsers": 32,
"inActiveUsers": 1,
"lockUsers": 1
}
},
"totalGroups": {
"totalGroup": 26,
"totalProperties": 22,
"propertyDetails": {
"activeProperties": 22,
"inActiveProperties": 0
}
},
"status": 0,
"message": null
}
dasbord.ts:
this.httpService.get('../assets/report.json').subscribe(
      data => {
      this.arr=data;
console.log(this.arr);
      },
      (err: HttpErrorResponse) => {
       console.log (err.message);
      }
   );
dasborad.html:
<div>
<div>Total Users(s)</div>
<div>
{{arr|json}}
</div>
</div>
</div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon >more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" >
<div style="width:100%">
<div class="card border space">
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
<div class="name" fxLayout="row">
<div>
<div>Active Users(s)</div>
</div>
</div>
</div>
<div class="content">
Hello :
</div>
</div>
</div>