如何在HTML中的Typescript中迭代JSON数组？

Question

I have a snippets of JSON array as shown below:

[{
        "auction_number": "015",
        "email": "pete@abc.com",
        "first_name": "Peter",
        "last_name": "Dan",
        "table": 0,
        "id": "015"
    },
    {
        "auction_number": "024",
        "email": "dan@gog.com",
        "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.

Answer 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 .

Answer 2

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>