How can I display a JSON Array on the UI using AngularJS?
I have the JSON array in the controller, and I'm attempting to retrieve it in the view. Below is the code snippet of what I have implemented.
Please provide feedback on whether my approach is appropriate or if there is a better way to accomplish this task.
var practiceApp = angular.module('usermodel', [])
.controller('UserController', UserController);
function UserController(){
this.users= [{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
...
]<h1> Here we have listed two users</h1>
<body>
<div ng-model="usermodel" ng-controller="UserController as us" >
<table class="table table-striped">
<th>id</th>
<th>name</th>
<th>email</th>
<th>address</th>
<th>phone</th>
</thead>
<tbody>
<tr ng-repeat= "item inusers">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.address.city}}</td>
<td>{{item.phone}}</td>
</tr>
</tbody>
</table>
</div>
</body>I would greatly appreciate any assistance.
Thank you!