I am dealing with a JSON object that I need to display in a table. Here is my JSON data:
json: string = `{
"name" : "John",
"surname" : "Walsh",
"age" : "23"
}`;
To present this data in a table, I attempted the following code snippet:
<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>
However, when I tried to parse the JSON data using JSON.parse(), I encountered an error message:
Error: Cannot find a differ supporting object '[object Object]' of type 'John'. NgFor only supports binding to Iterables such as Arrays.
In an attempt to resolve this issue, I converted the JSON object into an array using the following code snippet:
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] });
}
}
}
Despite this conversion, I still faced difficulty in iterating over the array using NgFor.