Question

我在这里尝试做的是，我想使用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值用于角度表，所以我将JSON值存储在范围内的角度对象中，这是我的Javascript代码。我将此文件命名为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

<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？

Answer 1

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

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

＆＃13;

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"
    }
]
}

＆＃13;

<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>

＆＃13;

正如您所看到的，我通过仅添加一个html标签来修复它！

如何在AngularJS中使用JSON数组？

1 个答案: