tell me how to display json object values in angular?

Question

I have retrieved data using rest API in angular. For your reference output is shown in screenshot. i want to display only "classLevelPermissions" in the table form(refer .html).

.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)
  {
      // console.log(className);


    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': configuration.PARSE_KEY,
        'X-Parse-Master-Key': configuration.PARSE_MASTER_KEY,
        // 'sessiontoken' : "r:92f65c2eb6c90c6aeaab713cf39ae491",

      })

    };
        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>

Please get this point output shown in screenshot where 'role:_superadmin' is not static value. I want exact output like below -

   RoleName     |      Get    |     Find     | Create | Update | Delete
 _superadmin    | public, yes | public, yes  | yes    |  no    | yes

Note - yes when value is "true" and no when value is "false". And print Public when this ['*' : true] exist.

Answer 1

try this(.ts code)

 await this.rec.getclpdata(this.className).toPromise().then(result => {
      var obj = {};
      var keyType = Object.keys(result.classLevelPermissions.delete)[0]; 
       obj['roleName'] = keyType.split(':',2)[1]; 
obj['find']= result.classLevelPermissions.find[keyType ]? "Yes" : "No";
obj['isFindPublic']= result.classLevelPermissions.find['*']? "public" : false;
obj['get']= result.classLevelPermissions.get[keyType ]? "Yes" : "No";
obj['isGetPublic']= result.classLevelPermissions.get['*']? "public" : false;
obj['create'] = result.classLevelPermissions.create[keyType ]? "Yes" : "No";
obj['update']= result.classLevelPermissions.update[keyType ]? "Yes" : "No";
obj['delete']= result.classLevelPermissions.delete[keyType ]? "Yes" : "No"; 
this.clplist.push(obj);

try this(.html)

<tr *ngFor=" let res of clplist">
                <td>{{$index + 1}}</td>
                <td>{{res.roleName}}</td>
                <td><span *ngIf="res.isFindPublic">{{res.isFindPublic}}{{","}}</span>{{res.find}}</td>
                <td><span *ngIf="res.isGetPublic">{{res.isGetPublic}}{{","}}</span>{{res.get}}</td>
                <td>{{res.create }}</td>
                <td>{{res.update }}</td>
                <td>{{res.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>