After fetching data through a REST API in Angular, I need to display only the "classLevelPermissions" in table format as shown in the .html file.
.ts -
async getclp(className: string) {
debugger;
this.clplist = [];
this.className = className;
var kk1 = [];
this.clpcollist = [];
await this.rec.getclpdata(this.className).toPromise().then(result => {
this.clplist.push(result);
}, (error) => {
alert("Failed" + error.message);
});
}
service.ts -
getclpdata(className :string)
{
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'X-Parse-Application-Id': configuration.PARSE_KEY,
'X-Parse-Master-Key': configuration.PARSE_MASTER_KEY,
})
};
return this.http.get<any>(this.geturl + className,httpOptions).pipe(
map(result => {
console.log(result);
return result;
})
);
}
.html -
<div class="modal-body modal-lg">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-checkable order-column valign-middle"
id="example4">
<thead>
<tr>
<th>Sr.No</th>
<th>Role Name</th>
<th>Find</th>
<th>Get</th>
<th>Create</th>
<th>Update</th>
<th>Delete</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor=" let res of clplist ; let i = index;">
<td>{{i + 1}}</td>
<td>{{res.result.classLevelPermissions.find}}</td>
<td>{{res.result.classLevelPermissions.get}}</td>
<td>{{res.result.classLevelPermissions.create }}</td>
<td>{{res.result.classLevelPermissions.update }}</td>
<td>{{res.result.classLevelPermissions.delete}}</td>
<td class="center">
<button class="btn btn-danger btn-sm" (click)="deleteDBField(rlist.fieldName)">
<i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want the output to be formatted exactly like this:
RoleName | Get | Find | Create | Update | Delete
_superadmin | public, yes | public, yes | yes | no | yes
Note: Display "yes" when value is "true", "no" when value is "false". Also, print "Public" when ['*' : true] exists.