binding json array value in angular

Question

I am trying display my JSON (ARRAY) to html column if I access 1) {{data.pageValue[0].firstName}} I am getting value but If i tried using 2) {{data.pageValue.firstName}} without array the value is not working actually I cannot use the 1st code because the column will be dynamic below is my json

        "personlDatas": [
        {
            "objId": 0,
            "userId": 0,
            "firstName": "jack"
        },
        {
            "objId": 0,
            "userId": 1,
            "firstName": "Vimal"
        },
        {
            "objId": 0,
            "userId": 2,
            "firstName": "Suresh"
        },  
    ]

Please let me know how to access the object

Answer 1

have you head of ngFor?

 <li *ngFor="let person of personlDatas">
      {{ person?.firstName }}
 </li>

Answer 2

You need to use *ngFor to loop over your data to display data dynamically.

Try this :

<table>
  <tr>
    <th>objId</th>
    <th>userId</th>
    <th>firstName</th>
  </tr>
  <tr *ngFor="let user of data.pageValue">
    <td>user.objId</td>
    <td>user.userId</td>
    <td>user.firstName</td>
  </tr>
</table>