Loop on an object

Question

In the internal-transfer-details page, I have a table with two columns: I have a numerical value and a hyperlink.

illustration 1

illustration2

If I click on the first link, I want to retrieve in the HTML table, the value 840.

I get to the internal-transfer-watch page and I get a lot of rows. I just want to retrieve a row. (the value 840)

illustration 3

ID is 347075

illustration 4

The JSON file is here.

internal-transfert-details.component.ts (parent)

export class InternalTransfertDetailsComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  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 => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        
        this.internalTransfertDetails = res.TRANS.map(
          internalTransfertLine => {
            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
            }
          }
        );
      }
    });
  }

}

internal-transfert-details.component.html

<div class="home-content">
  <div class="container" *ngIf="internalTransfertDetails">
    <div class="pt-50">
      <h1 class="text-center pb-3">Transfert Interne - Details</h1>
      <div class="row pt-3 container">
        <div class="card" style="width: 20%;">
          <div class="card-body">
            <table class="table table-striped table-hover">
              <thead class="thead-light">
                <tr class="text-center">
                  <th scope="col">Solde</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  *ngFor="let internalTransfertDetail of internalTransfertDetails"
                >
                  <td scope="row" class="text-end">
                    {{internalTransfertDetail.solde }}
                  </td>
                  <td scope="row " class="text-end">
                    <a
                      [routerLink]="[ '/transferts/internal-transfert-watch/' + internalTransfertDetail.titre.svm ] "
                    >
                      Link
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

internal-transfert-details.response.ts

import { ApiResponse } from "src/shared/types/api.response";

export interface InternalTransfertDetailsResponse extends ApiResponse {
    TRANS: {
        TITRE: {
            LABEL: string,
            ISIN: string,
            SVM: number,
        },
        SOLDE: number,
        QTE_VENTE: number,
        QTE_BLOQ: number,
        QTE_TRF: number,


    }[];
}

internal-transfert-details.ts

export interface InternalTransfertDetails {
    titre: {
        label: string;
        isin: string;
        svm: number;
    },

    solde: number;
    qte_vente: number;
    qte_bloq: number; 
    qte_trf: number; 

}

internal-transfert-watch.component.ts (child)

export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  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 => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        
        this.internalTransfertDetails = res.TRANS.map(
          internalTransfertLine => {
            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
            }
          }
        );
      }
    });
  }

}

internal-transfert-watch.component.html

<div class="home-content">
  <div class="container">
    <div class="pt-50">
      <h1 class="text-center pb-3">Transfert Interne - Details</h1>
      <div class="row pt-3 container">
        <div class="card" style="width: 30%;">
          <div class="card-body">
            <table class="table table-striped table-hover">
              <thead class="thead-light">
                <tr class="text-center">
                  <th scope="col">Solde</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  *ngFor="let internalTransfertDetail of internalTransfertDetails"
                >
                  <td scope="row" class="text-center">
                    {{internalTransfertDetail.solde }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Thanks you a lot

Providing data instead of images of it helps to get much faster recommendations from the community — RF1991, Apr 20 '22 at 12:50
@RF1991: Sorry, I edited my first message, I added the JSON file. — waloniarix, Apr 20 '22 at 12:55
You are itereting a data using ngFor - since the data itself is an array of objects. This is the correct result. If you need to just see the Nth iteration replace the ngFor with something like myArray[0].data — Jacopo Sciampi, Apr 20 '22 at 13:01

score 0 · Accepted Answer · answered Apr 20 '22 at 13:01

0

If you only want one line, don't use ngFor:

Change

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
  <td scope="row" class="text-center">{{internalTransfertDetail[0].solde }}</td>
</tr>

To

<tr>
  <td scope="row" class="text-center">{{internalTransfertDetails[0].solde }}</td>
</tr>

answered Apr 20 '22 at 13:01

Chris Hamilton

9,252
1
9
26

Thanks, but the problem is that if I click on hyperlink #2, I still get the value of the first index in the array. – waloniarix Apr 20 '22 at 13:09
I have no idea what hyperlink #2 is, sorry. – Chris Hamilton Apr 20 '22 at 13:11
no problem, thanks again for your help. – waloniarix Apr 20 '22 at 13:20
1

Perhaps you should explain what this mysterious hyperlink is in your question... – Chris Hamilton Apr 20 '22 at 13:28
I edited my post, normally it's more detailed... Thank you in advance – waloniarix Apr 20 '22 at 13:55
So you want to navigate to another page that only shows one row, so you should create a new component with an input variable, not edit this one. – Chris Hamilton Apr 20 '22 at 14:43
it works !! I added an input it works, thank you a lot. – waloniarix Apr 22 '22 at 08:45

shehanpathi · Answer 2 · 2022-04-20T16:17:51.163

0

Modify component.ts by adding filter like below.

this.internalTransfertDetails = res.TRANS.filter(internalTransfert => internalTransfert.SOLDE == param1).map(
      internalTransfertLine => {
        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
        }
      }
    );

And keep component.html like below.

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
    <td scope="row" class="text-center">
        {{internalTransfertDetail.solde }}
    </td>
</tr>

Hope you got the answer.

edited Apr 20 '22 at 16:17

answered Apr 20 '22 at 13:17

shehanpathi

312
4
15

When, I open a different hyperlink I always get the value `840`. :-( – waloniarix Apr 20 '22 at 13:22
Okay, Then You have to get the solde value from the URL as a query param. You can refer this link for that (https://stackoverflow.com/questions/47455734/how-to-get-query-parameters-from-url-in-angular-5). Then replace that value in my filter method param1. I have edited my answer. Please check filter method and replace param1 with your query param value. – shehanpathi Apr 20 '22 at 16:17
I added an input, it works now, thank you for your help. – waloniarix Apr 22 '22 at 08:46

score 0 · Answer 3 · answered Apr 20 '22 at 13:22

internalTransfertDetail is an object of an array. There's no reason to use the subscript operator here.

<tr *ngFor="let internalTransfertDetail of internalTransfertDetails">
  <td scope="row" class="text-center">{{internalTransfertDetail.solde }}</td>
</tr>

Let me know if this helps ^-^

Loop on an object

3 Answers3