My goal here is to consume the JSON data that I am generating through a Spring Restful WebService. The JSON data looks like this:
[
{
"userid": 1,
"firstName": "kevin",
"lastName": "buruk",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b0b5a3b5ab80b5a2a9eea3afad">[email protected]</a>"
},
{
"userid": 2,
"firstName": "helm",
"lastName": "krpuk",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a626f666761787f7a7f614a6d676b636624696567">[email protected]</a>"
},
{
"userid": 3,
"firstName": "batok",
"lastName": "kelapa",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3e0f5eeeaeae4ede0f1e0c1e6ece0e8edafe2eeec">[email protected]</a>"
}
]
This JSON is being generated by a function in my Java Spring MVC Controller, which looks 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;
}
}
I am planning to display the JSON values in an Angular table, so I have stored the JSON data in an angular object within the scope. Here is my JavaScript code named app.js:
app.js
function Hello($scope, $http) {
$http.get('http://localhost:8080/SpringServiceJsonSample/service/').
success(function(data) {
$scope.users = data;
});
}
Lastly, here is my HTML page named 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>
I encountered an issue where nothing was being displayed on the page. Previously, when I tried to consume JSON with only one record, it worked fine. However, now that I am trying to consume an array of records, it's not working as expected. Can you spot what might be missing here? Is it an issue with the JSON or my JavaScript implementation?