如何在AngularJS中使用JSON數組？

什麼，我想在這裏做的是，我要佔用我產生使用Spring RESTful Web服務，它是這個樣子的JSON：如何在AngularJS中使用JSON數組？

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

這JSON是在我的Java Spring MVC的控制器此功能產生，這是這個樣子：

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值，這裏是我的Javascrip t代碼。我命名這個文件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？

來源

2015-09-17 Ke Vin

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

關於你的問題：錯誤的HTML代碼。這裏的固定版本

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>

正如你所看到的，我只增加一個HTML標籤定了！

來源

2015-09-17 04:40:18 axon

oohh！我錯過了

標籤。謝謝，但我得到另一個錯誤，而我更新angularjs版本1.4.5 –

我覺得Angular 1.39停止支持這樣的自由風格控制器。您需要有一個模塊並將控制器添加到它。 –

如何在AngularJS中使用JSON數組？

回答

相關問題