How show one element of the JSON on interpolation with Angular-CodePudding

How show one element of the JSON on interpolation with Angular

  public responseData:any;

  renderTokenCard(){
    this.mundipaggS.checkToken().subscribe((response:any)=> {
    console.log("success: ", JSON.stringify(response));
    this.cartS.tokenCard = response;
    this.responseData = response;
  }, );

    <div >
    <i ></i>
       <div >
         <b>{{responseData}}</b>
        </div
    </div>

The JSON

[{"id":1,"pessoa_id":75505,"created_at":"2022-02-01T17:42:46.000000Z","holder":"test ","validade":"2026-06-01","bandeira":"Mastercard"}]

How can I show the JSON holder property for example?

CodePudding user response：

sould be pretty simple if I understand you correctly:

this.responseData = response?[0];

<!-- the whole responseData -->
<b>{{responseData | json}}</b>


<!-- only the holder property -->
<b *ngIf="responseData">{{responseData.holder}}</b>

CodePudding user response：

Using your example, you can use interpolation to display it in HTML.

<div >
<i ></i>
//ngIf to check if responseData is not undefined, otherwise it will throw error
   <div  *ngIf="responseData && responseData[0]">
     <b> {{responseData[0].holder }} </b>
    </div>
</div>

I see you are returning an array of objects, If you want to show multiple holders, you can use *ngFor to display them

<div >
<i ></i>
   <div  *ngFor="let data of responseData">
     <b> {{data.holder }} </b>
   </div>
</div>