Menu
What i trying to do here is, i want to consume the JSON that i produce using Spring Restful WebService, which is looked like this :
[
{
"userid": 1,
"firstName": "kevin",
"lastName": "buruk",
"email": "[email protected]"
},
{
"userid": 2,
"firstName": "helm",
"lastName": "krpuk",
"email": "[email protected]"
},
{
"userid": 3,
"firstName": "batok",
"lastName": "kelapa",
"email": "[email protected]"
}
]
That JSON is produce by this function in my Java Spring MVC Controller, which is looked like this :
SpringController.java
@RestController
@RequestMapping("/service/")
public class SpringServiceController {
UserService userService = new UserService();
@RequestMapping(method = RequestMethod.GET,headers="Accept=application/json")
public List<User> getAllUsers() {
List<User> users=userService.getAllUsers();
return users;
}
}
And i am about to consume the JSON value into angular table, so i do store the JSON value in angular object in the scope, here is my Javascript code. i named this file app.js
app.js
function Hello($scope, $http) {
$http.get('http://localhost:8080/SpringServiceJsonSample/service/').
success(function(data) {
$scope.users = data;
});
}
and here is my html page. i named it index.html index.html
<html ng-app>
<head>
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Hello">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.userid}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</div>
</body>
</html>
What i missed here? i won't show anything. Before this i was trying to consume the JSON that i only have one record, it work properly. But this time i trying to consume the array, and i failed. What i missed here? is it the JSON or my javascript?
946
First of all, you have to use latest version of angular. Now, it's 1.4.5 with more performance optimizations and features.
About your question: error in html code. Here's the fixed version
function Hello($scope, $http) {
$scope.users = [
{
"userid": 1,
"firstName": "kevin",
"lastName": "buruk",
"email": "[email protected]"
},
{
"userid": 2,
"firstName": "helm",
"lastName": "krpuk",
"email": "[email protected]"
},
{
"userid": 3,
"firstName": "batok",
"lastName": "kelapa",
"email": "[email protected]"
}
]
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<table ng-controller="Hello">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.userid}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</body>As you can see, I fixed it with adding only one html tag!
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
