Cannot find a differ supporting object '[object Object]' of type 'John'. NgFor only supports...

I have a JSON:

json: string = `{
"name" : "John",
"surname" : "Walsh",
"age" : "23"
}`;


And I need to show it in table:

<table width="700">
<caption>All Users</caption>
<thead>
<tr>
<th>name</th>
<th>surname</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td *ngFor="let names of users"></td>
{{ names}}
</tr>
</tbody>
</table>


I tried to do like this:

users = JSON.parse(this.json);


but got an error:

Error: Cannot find a differ supporting object '[object Object]' of type 'John'. NgFor only supports binding to Iterables such as Arrays.
​

Then I tried convert users to array like this:

arr:Array<{key: string, value: string}> = [];
constructor(){
for (var key in this.users) {
if (this.users.hasOwnProperty(key)) {
this.arr.push({ key: key, value: this.users[key] });
}
}
}


but I can't iterate it using NgFor.

Continue reading...