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 class="card-body">
<i class="fab fa-cc-visa "></i>
<div class="card-text">
<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?
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>
Using your example, you can use interpolation to display it in HTML.
<div class="card-body">
<i class="fab fa-cc-visa "></i>
//ngIf to check if responseData is not undefined, otherwise it will throw error
<div class="card-text" *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 class="card-body">
<i class="fab fa-cc-visa "></i>
<div class="card-text" *ngFor="let data of responseData">
<b> {{data.holder }} </b>
</div>
</div>