gpt4 book ai didi

javascript - 如何在 AngularJS 中使用 JSON 数组?

转载 作者:塔克拉玛干 更新时间:2023-11-02 19:17:51 24 4
gpt4 key购买 nike

我想在这里做的是,我想使用我使用 Spring Restful WebService 生成的 JSON,它看起来像这样:

[
{
"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 中的这个函数生成的,它看起来像这样:

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

应用程序.js

function Hello($scope, $http) {
$http.get('http://localhost:8080/SpringServiceJsonSample/service/').
success(function(data) {
$scope.users = data;
});
}

这是我的 html 页面。我将它命名为 index.htmlindex.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?

最佳答案

首先,你必须使用最新版本的angular。现在,它是 1.4.5,具有更多性能优化和功能。

关于您的问题:html 代码错误。这是固定版本

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 标签就修复了它!

关于javascript - 如何在 AngularJS 中使用 JSON 数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32622568/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com