使 http 进入 angularjs foreach 循环,结果为 post
Making http get in angularjs foreach loop with post results
我有一个网络应用程序,它记录了媒体流中访问者的 IP 地址、连接和断开连接时间以及传输的位数。在 table 中显示此信息之前,我 运行 通过搜索结果并在 $angular.forEach()
循环中添加诸如连接长度和每秒位数之类的内容。我想向数据库发出 $http get
请求以获取 ip 地址的位置和 isp 信息。我尝试将获取请求直接添加到 forEach
循环,但我得到的是 TypeError: Cannot assign to read only property 'method' of "theIp"
。我测试了我用来用一个地址连接到数据库的 cgi 文件,所以它确实有效。查询总是returns一个ip.
$http.post(...)
.then(function(result) {
console.log(result);
$scope.results = result.data.data;
angular.forEach($scope.results, function(conn) {
conn.connected = moment.utc(conn.connected).toDate();
conn.disconnected = moment.utc(conn.disconnected).toDate();
conn.connected = moment(conn.connected).format("YYYY-MM-DD HH:mm:ss");
conn.disconnected = moment(conn.disconnected).format("YYYY-MM-DD HH:mm:ss");
conn.secondsElapsed = moment(conn.disconnected).diff(moment(conn.connected), 'seconds');
conn.bitsPerSecond = conn.traffic / conn.secondsElapsed;
//console.log("connection is " + conn.streamName);
$http.get("thedb.cgi?action=get&addr=", conn.ip) //addr is name of ip argument
.success(function(ipLocation){
console.log(ipLocation); //just want to fetch info correctly before adding it to view
});
});
我一直在阅读有关 promises 的内容,但我认为如果我 运行 无论如何都在浏览结果数组,为什么还需要做出另一个 promise?
编辑:好的,所以我尝试了一些建议的修复,现在我遇到了一个不同的问题。我收到了 api 的回复(我忘记了反斜杠),但是空的 json 对象被传入了。现在我的 $http
请求看起来像:
$http.get("/api/thedb.cgi", {action:'get', addr:conn.ip})
.then(function(ipLocation){
console.log(ipLocation);
});
但它发送空白 JSON 对象并在绘制 table 很久之后执行请求。根据要求,这里是 table:
相关部分的视图
<tbody>
<tr ng-repeat="result in results>
<td style="text-align: left;">{{result.ip}}</td>
<td style="text-align: center;">{{result.connected}}</td>
<td style="text-align: center;" ng-hide="liveListenerCheck">{{result.disconnected}}</td>
<td ng-module="" style="text-align: right;" ng-hide="result.secondsElapsed < 60">{{Math.floor(result.secondsElapsed/60) | number:0}}:{{result.secondsElapsed % 60 | leadingZero}}</td>
<td style="text-align: right;" ng-show="result.secondsElapsed < 60">>1</td>
<td style="text-align: right;">{{result.bitsPerSecond | number:0}}</td>
</tr>
</tbody>
我会为 IP 地址的位置添加另一列
我觉得这个
$http.get("thedb.cgi?action=get&addr=", conn.ip)
应该这样说
$http.get("thedb.cgi?action=get&addr=" + conn.ip)
另外,我不确定这是否有效...as per docs你应该这样做
$http.get("thedb.cgi", {action:'get', addr:conn.ip}).then(....)
此外,如果您想像这样修改 $scope.results
...
angular.forEach($scope.results, function(conn) {
conn.connected = moment.utc(conn.connected).toDate();
...
它不会工作...你应该做这样的事情
...
angular.forEach($scope.results, function(conn, key, obj) {
obj[key].connected = moment.utc(conn.connected).toDate();
...
好的,我发现代码如下所示:
angular.forEach($scope.results, function(conn, key){
$http.get("thedb.cgi?action=get&addr="+conn.ip, { cache: true})
.then(function(ipLocation) {
console.log(ipLocation);
var locationResults = ipLocation.data;
conn.country = locationResults.country;
//... more assignments
});
});
现在我需要弄清楚如何限制大型查询的异步请求数量,以免页面崩溃。
我有一个网络应用程序,它记录了媒体流中访问者的 IP 地址、连接和断开连接时间以及传输的位数。在 table 中显示此信息之前,我 运行 通过搜索结果并在 $angular.forEach()
循环中添加诸如连接长度和每秒位数之类的内容。我想向数据库发出 $http get
请求以获取 ip 地址的位置和 isp 信息。我尝试将获取请求直接添加到 forEach
循环,但我得到的是 TypeError: Cannot assign to read only property 'method' of "theIp"
。我测试了我用来用一个地址连接到数据库的 cgi 文件,所以它确实有效。查询总是returns一个ip.
$http.post(...)
.then(function(result) {
console.log(result);
$scope.results = result.data.data;
angular.forEach($scope.results, function(conn) {
conn.connected = moment.utc(conn.connected).toDate();
conn.disconnected = moment.utc(conn.disconnected).toDate();
conn.connected = moment(conn.connected).format("YYYY-MM-DD HH:mm:ss");
conn.disconnected = moment(conn.disconnected).format("YYYY-MM-DD HH:mm:ss");
conn.secondsElapsed = moment(conn.disconnected).diff(moment(conn.connected), 'seconds');
conn.bitsPerSecond = conn.traffic / conn.secondsElapsed;
//console.log("connection is " + conn.streamName);
$http.get("thedb.cgi?action=get&addr=", conn.ip) //addr is name of ip argument
.success(function(ipLocation){
console.log(ipLocation); //just want to fetch info correctly before adding it to view
});
});
我一直在阅读有关 promises 的内容,但我认为如果我 运行 无论如何都在浏览结果数组,为什么还需要做出另一个 promise?
编辑:好的,所以我尝试了一些建议的修复,现在我遇到了一个不同的问题。我收到了 api 的回复(我忘记了反斜杠),但是空的 json 对象被传入了。现在我的 $http
请求看起来像:
$http.get("/api/thedb.cgi", {action:'get', addr:conn.ip})
.then(function(ipLocation){
console.log(ipLocation);
});
但它发送空白 JSON 对象并在绘制 table 很久之后执行请求。根据要求,这里是 table:
相关部分的视图<tbody>
<tr ng-repeat="result in results>
<td style="text-align: left;">{{result.ip}}</td>
<td style="text-align: center;">{{result.connected}}</td>
<td style="text-align: center;" ng-hide="liveListenerCheck">{{result.disconnected}}</td>
<td ng-module="" style="text-align: right;" ng-hide="result.secondsElapsed < 60">{{Math.floor(result.secondsElapsed/60) | number:0}}:{{result.secondsElapsed % 60 | leadingZero}}</td>
<td style="text-align: right;" ng-show="result.secondsElapsed < 60">>1</td>
<td style="text-align: right;">{{result.bitsPerSecond | number:0}}</td>
</tr>
</tbody>
我会为 IP 地址的位置添加另一列
我觉得这个
$http.get("thedb.cgi?action=get&addr=", conn.ip)
应该这样说
$http.get("thedb.cgi?action=get&addr=" + conn.ip)
另外,我不确定这是否有效...as per docs你应该这样做
$http.get("thedb.cgi", {action:'get', addr:conn.ip}).then(....)
此外,如果您想像这样修改 $scope.results
...
angular.forEach($scope.results, function(conn) {
conn.connected = moment.utc(conn.connected).toDate();
...
它不会工作...你应该做这样的事情
...
angular.forEach($scope.results, function(conn, key, obj) {
obj[key].connected = moment.utc(conn.connected).toDate();
...
好的,我发现代码如下所示:
angular.forEach($scope.results, function(conn, key){
$http.get("thedb.cgi?action=get&addr="+conn.ip, { cache: true})
.then(function(ipLocation) {
console.log(ipLocation);
var locationResults = ipLocation.data;
conn.country = locationResults.country;
//... more assignments
});
});
现在我需要弄清楚如何限制大型查询的异步请求数量,以免页面崩溃。