How to iterate a JSON array in typescript in HTML?

Question

I have a snippets of JSON array as shown below:

[{
        "auction_number": "015",
        "email": "[email protected]",
        "first_name": "Peter",
        "last_name": "Dan",
        "table": 0,
        "id": "015"
    },
    {
        "auction_number": "024",
        "email": "[email protected]",
        "first_name": "Dan",
        "last_name": "Fain",
        "table": 0,
        "id": "024"
    }
]

Typescript Code:

The typescript (ts) for the above JSON array is shown below. Here attendees is an array object.

attendees: Attendee[];
 constructor(public authService: AuthService) {
    const str = localStorage.getItem("attendees");
    if(str) {
      this.attendees = JSON.parse(str);
      console.log(str);
    }
  }

HTML Code:

The HTML code which I have used in order to iterate everything from the JSON array (in the typescript code) is shown below. For some reasons, it is not able to iterate attendees in the HTML.

<tr *ngFor="let row of attendees">
   <td class="left">{{ attendees.first_name }} {{ attendees.last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendees.table}}</td>
   <td class="right-bill">Bill</td>
</tr>

Problem Statement:

I am wondering what changes I should make in the HTML code above so that I am successfully able to iterate attendees array. I tried using ngfor directive but somehow it didn't work.

kctang · Accepted Answer · 2018-04-23 01:56:35Z

1

You should reference fields in each row as row.first_name because you set each attendee as let row of attendees. The variable you defined is row.

answered Apr 23, 2018 at 1:56

kctang

11.2k8 gold badges46 silver badges65 bronze badges

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

2 Comments

flash Over a year ago

I tried this

<tr *ngFor="let row of attendee">                     <td class="left">{{row.first_name}}</td>                     <td class="number1">250</td>                     <td class="table1">{{row.table}}</td>                     <td class="right-bill">Bill</td>                 </tr>

but I didn't see any change.

flash Over a year ago

It should be let row of attendees. I modified that. Sorry for the typo above.

Sajeetharan · Accepted Answer · 2018-04-23 02:18:05Z

1

You are accessing the parent loop again, you should access only the elements of row

<tr *ngFor="let row of attendees">
   <td class="left">{{ row .first_name }} {{ row .last_name }}</td>
   <td class="number1">250</td>
   <td class="table1">{{attendees.table}}</td>
   <td class="right-bill">Bill</td>
</tr>

answered Apr 23, 2018 at 2:18

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

How to iterate a JSON array in typescript in HTML?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related