I'm a newbie to Angular and I'm doing some prototyping. Unfortunately when I call a REST service I'm having issues displaying the data. The console is not providing clues because no errors come back.
我是Angular的新手,我正在做一些原型设计。不幸的是,当我调用REST服务时,我遇到了显示数据的问题。控制台没有提供线索,因为没有错误返回。
HTML is below:
HTML如下:
<!doctype html>
<html ng-app="statViewer">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Angular Page</title>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/statViewer.js" type="text/javascript"></script>
</head>
<body ng-controller="MainController">
<h1> {{title}} </h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stat in stats">
<td>{{stat.MessageName}}</td>
<td>{{stat.TypeCount}}</td>
</tr>
</tbody>
</table>
</body>
</html>
JS is below:
JS如下:
(function() {
var app = angular.module("statViewer", []);
var MainController = function($scope, $http) {
$scope.title = "Angular test page";
$http.get("http://localhost:8080/API/getstats.json")
.then(onStatsComplete);
var onStatsComplete = function(response)
{
$scope.stats = response.data;
};
};
app.controller("MainController", MainController);
}());
I see that the service is being called because on the console window it prints out that the call was triggered. Result of the REST API being invoked is here:
我看到正在调用该服务,因为在控制台窗口中它打印出调用已被触发。调用REST API的结果如下:
[
{
"TypeCount": 45,
"SentDate": "2014-08-20T00:00:00.000Z",
"MessageName": "Message Type 1"
}
]
2 个解决方案
#1
2
You are defining the variable onStatsComplete
with your callback function after the call to $http.get
. So at the point in time when you are making the call to $http.get
the value undefined
is passed to then rather than your callback function. Swap the lines around like this:
在调用$ http.get之后,使用回调函数定义变量onStatsComplete。因此,在您调用$ http.get的时候,将undefined值传递给当时而不是您的回调函数。像这样交换线条:
var onStatsComplete = function(response)
{
$scope.stats = response.data;
};
$http.get("http://localhost:8080/API/getstats.json")
.then(onStatsComplete);
See also this question on the difference between writing var y = function(){...}
and function y(){...}
.
另见这个问题,关于写var y = function(){...}和函数y(){...}之间的区别。
#2
0
To give more insight, when ever you do $http.get call.
为了提供更多的洞察力,你何时进行$ http.get调用。
Every $http call is Aysncronous in angularJs.
每个$ http调用都是angularJs中的Aysncronous。
$http.get("http://localhost:8080/API/getstats.json")
.then(function(result){
console.log(result.TypeCount);
});
Let me know if you still unable to get the data.
如果您仍然无法获取数据,请告诉我们。
#1
2
You are defining the variable onStatsComplete
with your callback function after the call to $http.get
. So at the point in time when you are making the call to $http.get
the value undefined
is passed to then rather than your callback function. Swap the lines around like this:
在调用$ http.get之后,使用回调函数定义变量onStatsComplete。因此,在您调用$ http.get的时候,将undefined值传递给当时而不是您的回调函数。像这样交换线条:
var onStatsComplete = function(response)
{
$scope.stats = response.data;
};
$http.get("http://localhost:8080/API/getstats.json")
.then(onStatsComplete);
See also this question on the difference between writing var y = function(){...}
and function y(){...}
.
另见这个问题,关于写var y = function(){...}和函数y(){...}之间的区别。
#2
0
To give more insight, when ever you do $http.get call.
为了提供更多的洞察力,你何时进行$ http.get调用。
Every $http call is Aysncronous in angularJs.
每个$ http调用都是angularJs中的Aysncronous。
$http.get("http://localhost:8080/API/getstats.json")
.then(function(result){
console.log(result.TypeCount);
});
Let me know if you still unable to get the data.
如果您仍然无法获取数据,请告诉我们。