使 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
                });
            });

现在我需要弄清楚如何限制大型查询的异步请求数量,以免页面崩溃。