title: Loop on an object
body: <p>In the <code>internal-transfer-details</code> page, I have a table with two columns: I have a numerical value and a hyperlink.</p>
  <p><a href="https://i.stack.imgur.com/jaEnp.png" rel="nofollow noreferrer">illustration 1</a></p>
  <p><a href="https://i.stack.imgur.com/rUzSQ.png" rel="nofollow noreferrer">illustration2</a></p>
  <p>If I click on the first link, I want to retrieve in the HTML table, the value <code>840</code>.</p>
  <p>I get to the <code>internal-transfer-watch</code> page and I get a lot of rows. I just want to retrieve a row. (the value <code>840</code>)</p>
  <p><a href="https://i.stack.imgur.com/5BNWn.png" rel="nofollow noreferrer">illustration 3</a></p>
  <p>ID is <code>347075</code></p>
  <p><a href="https://i.stack.imgur.com/4QAhv.png" rel="nofollow noreferrer">illustration 4</a></p>
  <p>The JSON file is <a href="https://jsonblob.com/966319018265034752" rel="nofollow noreferrer">here</a>.</p>
  <p><strong>internal-transfert-details.component.ts</strong>  (parent)</p>
  <pre><code>export class InternalTransfertDetailsComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject&lt;void&gt;();
  
    internalTransfertDetails: InternalTransfertDetails[] = [];
  
    constructor(private service: InternalTransfertDetailsService, private router: Router) { }
  
  
    ngOnInit(): void {
      this.getTransfert()
    }
  
    ngOnDestroy(): void {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    }
  
    private getTransfert(): void {
  
      this.service.getTransfert().pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res =&gt; {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          
          this.internalTransfertDetails = res.TRANS.map(
            internalTransfertLine =&gt; {
              return {
                titre: {
                  label: internalTransfertLine.TITRE.LABEL,
                  isin: internalTransfertLine.TITRE.ISIN,
                  svm: internalTransfertLine.TITRE.SVM,
                },
                solde: internalTransfertLine.SOLDE,
                qte_vente: internalTransfertLine.QTE_VENTE,
                qte_bloq: internalTransfertLine.QTE_BLOQ,
                qte_trf: internalTransfertLine.QTE_TRF
              }
            }
          );
        }
      });
    }
  
  }
  </code></pre>
  <p><strong>internal-transfert-details.component.html</strong></p>
  <pre><code>&lt;div class=&quot;home-content&quot;&gt;
    &lt;div class=&quot;container&quot; *ngIf=&quot;internalTransfertDetails&quot;&gt;
      &lt;div class=&quot;pt-50&quot;&gt;
        &lt;h1 class=&quot;text-center pb-3&quot;&gt;Transfert Interne - Details&lt;/h1&gt;
        &lt;div class=&quot;row pt-3 container&quot;&gt;
          &lt;div class=&quot;card&quot; style=&quot;width: 20%;&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;table class=&quot;table table-striped table-hover&quot;&gt;
                &lt;thead class=&quot;thead-light&quot;&gt;
                  &lt;tr class=&quot;text-center&quot;&gt;
                    &lt;th scope=&quot;col&quot;&gt;Solde&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr
                    *ngFor=&quot;let internalTransfertDetail of internalTransfertDetails&quot;
                  &gt;
                    &lt;td scope=&quot;row&quot; class=&quot;text-end&quot;&gt;
                      {{internalTransfertDetail.solde }}
                    &lt;/td&gt;
                    &lt;td scope=&quot;row &quot; class=&quot;text-end&quot;&gt;
                      &lt;a
                        [routerLink]=&quot;[ '/transferts/internal-transfert-watch/' + internalTransfertDetail.titre.svm ] &quot;
                      &gt;
                        Link
                      &lt;/a&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>internal-transfert-details.response.ts</strong></p>
  <pre><code>import { ApiResponse } from &quot;src/shared/types/api.response&quot;;
  
  export interface InternalTransfertDetailsResponse extends ApiResponse {
      TRANS: {
          TITRE: {
              LABEL: string,
              ISIN: string,
              SVM: number,
          },
          SOLDE: number,
          QTE_VENTE: number,
          QTE_BLOQ: number,
          QTE_TRF: number,
  
  
      }[];
  }
  </code></pre>
  <p><strong>internal-transfert-details.ts</strong></p>
  <pre><code>export interface InternalTransfertDetails {
      titre: {
          label: string;
          isin: string;
          svm: number;
      },
  
      solde: number;
      qte_vente: number;
      qte_bloq: number; 
      qte_trf: number; 
  
  }
  </code></pre>
  <p><strong>internal-transfert-watch.component.ts</strong>  (child)</p>
  <pre><code>export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject&lt;void&gt;();
  
    internalTransfertDetails: InternalTransfertDetails[] = [];
  
    constructor(private service: InternalTransfertDetailsService, private router: Router) { }
  
  
    ngOnInit(): void {
      this.getTransfert()
    }
  
    ngOnDestroy(): void {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    }
  
    private getTransfert(): void {
  
      this.service.getTransfert().pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res =&gt; {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          
          this.internalTransfertDetails = res.TRANS.map(
            internalTransfertLine =&gt; {
              return {
                titre: {
                  label: internalTransfertLine.TITRE.LABEL,
                  isin: internalTransfertLine.TITRE.ISIN,
                  svm: internalTransfertLine.TITRE.SVM,
                },
                solde: internalTransfertLine.SOLDE,
                qte_vente: internalTransfertLine.QTE_VENTE,
                qte_bloq: internalTransfertLine.QTE_BLOQ,
                qte_trf: internalTransfertLine.QTE_TRF
              }
            }
          );
        }
      });
    }
  
  }
  </code></pre>
  <p><strong>internal-transfert-watch.component.html</strong></p>
  <pre><code>&lt;div class=&quot;home-content&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;pt-50&quot;&gt;
        &lt;h1 class=&quot;text-center pb-3&quot;&gt;Transfert Interne - Details&lt;/h1&gt;
        &lt;div class=&quot;row pt-3 container&quot;&gt;
          &lt;div class=&quot;card&quot; style=&quot;width: 30%;&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
              &lt;table class=&quot;table table-striped table-hover&quot;&gt;
                &lt;thead class=&quot;thead-light&quot;&gt;
                  &lt;tr class=&quot;text-center&quot;&gt;
                    &lt;th scope=&quot;col&quot;&gt;Solde&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                  &lt;tr
                    *ngFor=&quot;let internalTransfertDetail of internalTransfertDetails&quot;
                  &gt;
                    &lt;td scope=&quot;row&quot; class=&quot;text-center&quot;&gt;
                      {{internalTransfertDetail.solde }}
                    &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/tbody&gt;
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thanks you a lot</p>