如何在AngularJS中使用JSON数组? [英] How to consume JSON array in AngularJS?
问题描述
我在这里想要做的是，我想使用Spring Restful WebService生成的JSON，如下所示:
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": "pucuk@ubi.com"
},
{
"userid": 2,
"firstName": "helm",
"lastName": "krpuk",
"email": "helmkrupuk@gmail.com"
},
{
"userid": 3,
"firstName": "batok",
"lastName": "kelapa",
"email": "batokkelapa@gmail.com"
}
]
JSON是由我的Java Spring MVC Controller中的此函数产生的，如下所示:
That JSON is produce by this function in my Java Spring MVC Controller, which is looked like this :
SpringController.java
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;
}
}
我将把JSON值消耗到angular表中，因此我将JSON值存储在范围内的angular对象中，这是我的Javascript代码.我将此文件命名为app.js
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;
});
}
这是我的html页面.我将其命名为index.html index.html
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>
我在这里错过了什么?我什么也不会显示.在此之前，我尝试使用我只有一条记录的JSON，它可以正常工作.但是这一次，我尝试使用该数组，但失败了.我在这里错过了什么?是JSON还是我的JavaScript?
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?
推荐答案
首先，您必须使用最新版本的angular.现在，它是1.4.5，具有更多的性能优化和功能.
First of all, you have to use latest version of angular. Now, it's 1.4.5 with more performance optimizations and features.
关于您的问题:html代码中的错误.这是固定版本
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": "pucuk@ubi.com"
},
{
"userid": 2,
"firstName": "helm",
"lastName": "krpuk",
"email": "helmkrupuk@gmail.com"
},
{
"userid": 3,
"firstName": "batok",
"lastName": "kelapa",
"email": "batokkelapa@gmail.com"
}
]
}
<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>
如您所见，我仅添加了一个html标记就对其进行了修复！
As you can see, I fixed it with adding only one html tag!
这篇关于如何在AngularJS中使用JSON数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
