How to iterate over json object in square brackets

Question

How to iterate Json object in square brackets?

This is the Json object "roles"

[
    { "id": 1, "name": "Admin" },
    { "id": 2, "name": "Editor" },
    { "id": 3, "name": "Viewer"}
]

This is not working:

<tr *ngFor="let role of roles">
    <td>{{role.id}}</td>
    <td>{{role.name}}</td>
</tr>