How show one element of the JSON on interpolation with Angular

Question

  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?

Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Heretic Monkey, Feb 07 '22 at 20:50

Zerotwelve · Answer 1 · 2022-02-07T14:37:55.643

0

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>

edited Feb 07 '22 at 14:37

answered Feb 07 '22 at 14:22

Zerotwelve

2,087
1
9
24

so it shows all the json content, I wanted it to show only the "holder" property – Leonardo Feb 07 '22 at 14:25
1

a solution I found was this {{responseData[0]?.holder}} but returns this error on console ERROR TypeError: Cannot read properties of undefined (reading '0') – Leonardo Feb 07 '22 at 14:26
ok, I updated my original answer – Zerotwelve Feb 07 '22 at 14:38
cool, that works too, but if I have any other json that is not at position 0, would there be a way to do it smarter? – Leonardo Feb 07 '22 at 14:45
this way I would have to create several variables, in case some other object is not in position 0 – Leonardo Feb 07 '22 at 14:46

HassanMoin · Answer 2 · 2022-02-07T20:47:24.320

0

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>

edited Feb 07 '22 at 20:47

answered Feb 07 '22 at 14:46

HassanMoin

2,024
1
6
16

if I have another json, with another "holder", the way you did can work? – Leonardo Feb 07 '22 at 14:52
If another JSON is coming from another response then you should have another variable for it. If the response in this is multiple arrays instead of one [0] the loop will work. Could you share the use case you are thinking about ? – HassanMoin Feb 07 '22 at 14:54
cool, this works, but it returns this error in the console ERROR TypeError: Cannot read properties of undefined (reading '0') – Leonardo Feb 07 '22 at 20:27
Try, `*ngIf="responseData && responseData[0]"`. The responseData might be undefined. – HassanMoin Feb 07 '22 at 20:37
On the component.ts wouldn't you need to change something? – Leonardo Feb 07 '22 at 20:39
I have 3 arrays, one with position 0,1,2, would you be able to differentiate each one? – Leonardo Feb 07 '22 at 20:41
Can you show me all the `array` data? – HassanMoin Feb 07 '22 at 20:48

How show one element of the JSON on interpolation with Angular

2 Answers2