Angular嵌套的http请求,前一个请求作为参数

时间:2017-12-05 15:01:21

标签: javascript angularjs

我正在构建一个应用程序,我在html表中列出事件。一个事件包含一些关于自身的信息,但也包含一个user-id,这个user-id是mongodb数据库中用户的标识符,使用

我想使用angular提供的$ http服务来首先获取事件,然后循环遍历响应中的数据并发出另一个get来获取每个user-id的用户对象。每个事件只包含一个用户ID。然后将用户对象作为嵌套对象附加到现有事件对象上。

然而,当我这样做时,我用于调用的user-id变量原来是未分配的,因为http调用是异步的。我已经阅读了关于追踪/链接电话的内容,但我没有让它发挥作用。

以下是我尝试过的100次尝试的代码..

控制器

"use strict";
(function () {
    var app = angular.module("app-test");

    app.controller("testController", function ($scope, $log, $http, $route) {

    var getAllQualityEvents = function () {
        return $http.get("http://localhost:5001/api/qualityevent")
            .then(function (response) {
                return response.data;
            });
    };

    var getUserForEvents = function (data) {
        var result;
        for (var d in data) {
            $http.get("http://localhost:5001/api/user/" + d.userId)
                .then(function (response) {
                    $scope.qualityEvent[d]["user"] = response.data;
                });
        };
    };

    // Run every loop.
    getAllQualityEvents()
        .then(function (data) {
            $scope.qualityEvent = data;
            getUserForEvents(data);
            });
    });
})();

Html文档(仅使用控制器的路径)

<div class="row">
    <div class="col-xl">
        <h1>Test events</h1>
    </div>
</div>
<div class="row">
    <div class="col-xl">
        <table class="table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>User Id</th>
                    <th>Something</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="qualityEvent in qualityEvents" class="{{qualityEvent.isQualityOk ? 'bg-success' : 'bg-danger'}}">
                    <td scope="row">{{qualityEvent.user}}</td>
                    <td>{{qualityEvent}}</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

错误消息

我的api返回一条错误消息,告诉我&#34; undefined&#34;不是有效的身份证。

1 个答案:

答案 0 :(得分:1)

data方法中的

getUserForEvents()很可能是一个数组,因此您需要data[d].userId而不是d.userId