How to iterate json in angular?

Question

I am getting the following json from a database, and I want to do an ngfor;but I don't know how to do it with this kind of JSON

link codebeautify.org

<div class="col-md-4" *ngFor="let referencia of referencias.rows">
       <div class="card text-center">
           <div class="card-header">

           </div>
           <div class="card-body">
               {{referencia.2}}
           </div>
      </div>
   </div>

As per your JSON, you'll require a nested *ngFor.

user3875919
– user3875919

2019-07-25 04:17:14 +00:00
Commented Jul 25, 2019 at 4:17 — user3875919
– user3875919, Commented Jul 25, 2019 at 4:17

Ethan Vu · Accepted Answer · 2019-07-25 04:25:23Z

1

You need to parse your json return from the API first before using it:

In the ts file where you receive your data:

referencias = JSON.parse(referencias);

And since each referencia from referencias.rows is an Array, you access it data like this referencia[arrayIndex]:

<div class="col-md-4" *ngFor="let referencia of referencias.rows">
    <div class="card text-center">
        <div class="card-header">
        </div>
        // Changed referencia.2 to referencia[2]
        <div class="card-body">
               {{referencia[2]}} // Should show 'AYALA'
        </div>
    </div>
</div>

edited Jul 25, 2019 at 4:25

answered Jul 25, 2019 at 4:19

Ethan Vu

2,9971 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AyushKatiyar · Accepted Answer · 2019-07-25 04:40:18Z

0

In your ts file, I am assuming referencias is the parsed json response of the API. The below solution is to get all the rows.

<div class="col-md-4" *ngFor="let referencia of referencias['rows']">
   <div class="card text-center">
       <div class="card-header">

       </div>
       <div class="card-body" *ngFor="let rowData of referencia">
           {{rowData}}
       </div>
  </div>

Hope this works for you.

edited Jul 25, 2019 at 4:40

answered Jul 25, 2019 at 4:31

AyushKatiyar

1,0209 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to iterate json in angular?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related