[Fixed] how to bind data from nested json object in angular 9?

Issue

I am trying to bind nested json object in my angular application. Here

component.html file

    <div class="row">
  <ul class=" g-img col-md-3 col-sm-3 col-xs-12" *ngFor="let data of ruleTypeList">
    <li *ngFor="let group of data.AnalyticsGroup; let i = index">
      <div class="object-box noti-box col s s1 home-box" >
        <p>{{data.RuleName}}</p>
       
        <p>{{group.GroupName}}</p>
        <div>
          <p>Overall Count: {{getCount(group.Id)}}</p>
        </div>
      </div>

    </li>
  </ul>
</div>

I am getting repetative id’s as shown here. Due to which i cannot get stable overall count.

component.ts file

  getCount(id){
   this.service.postGroupInfo(grpId).subscribe((res: any)=>{
 const count = res.Count
 return count

})
    }

How can i do it???

Solution

I love using pipe for this kind of problem

get-count.pipe.ts

import { Pipe, PipeTransform } from '@angular/core'
import { Service } from 'yourPath'

@Pipe({
  name: 'getCount',
})
export class getCountPipe implements PipeTransform {
  constructor(private _service: Service) {}

  transform(grpId: any): Promise<any> {
    return new Promise((resolve) => {
    if(!grpId) resolve(?) // grpId wasn't given with

      this._service.postGroupInfo(grpId).subscribe((response) => {
        resolve(response.Count)
      },(error) => {
         resolve('?') // Something wrong happen
        },
      )
    })
  }
}

component.module.ts

@NgModule({
 declarations: [
    //...
    getCountPipe,
  ],
  // ...
})

component.html

<p>Overall Count: {{group.Id | getCount | async}}</p>

ErrorsFixing