title: how to bind data from nested json object in angular 9?
body: <p>I am trying to bind nested json object in my angular application. Here</p>
  <p><em>component.html file</em></p>
  <pre><code>    &lt;div class=&quot;row&quot;&gt;
    &lt;ul class=&quot; g-img col-md-3 col-sm-3 col-xs-12&quot; *ngFor=&quot;let data of ruleTypeList&quot;&gt;
      &lt;li *ngFor=&quot;let group of data.AnalyticsGroup; let i = index&quot;&gt;
        &lt;div class=&quot;object-box noti-box col s s1 home-box&quot; &gt;
          &lt;p&gt;{{data.RuleName}}&lt;/p&gt;
         
          &lt;p&gt;{{group.GroupName}}&lt;/p&gt;
          &lt;div&gt;
            &lt;p&gt;Overall Count: {{getCount(group.Id)}}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I am getting repetative id's as shown here. Due to which i cannot get stable overall count.
  <a href="https://i.stack.imgur.com/7t7gV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7t7gV.png" alt="enter image description here" /></a></p>
  <p><em>component.ts file</em></p>
  <pre><code>  getCount(id){
     this.service.postGroupInfo(grpId).subscribe((res: any)=&gt;{
   const count = res.Count
   return count
  
  })
      }
  </code></pre>
  <p>How can i do it???</p>