Question

我正在使用AngularJS来构建Web应用程序。我有一台运行PHP的服务器，它从SQL数据库中获取一些数据并将其编码为JSON。在客户端，我使用Angular $ http服务来获取它，解析它并成功，但是我无法使用分配了获取数据的变量。这是执行HTTP请求的代码：

factory.employees = factory.getEmployeesFromServer();

factory.getEmployeesFromServer = function() {
        return $http.get("http://localhost/scrumboard/get_user.php")
            .success(function(response) {
                for(var property in response) {
                    console.log("PROP: "+property);
                    if (response.hasOwnProperty(property)) {
                        console.log("Has ownProperty: " + property)
                    }
                }
                console.log(JSON.stringify(response));
                return response.data;   
            })
            .error(function(response, status, headers, config) {

            })
    }

属性的打印只包含零和一。但是，当Stringify-print到达控制台时，它看起来像这样：

[{"email_id":"rob_en@gmail.com","user_name":"rob","first_name":"Robert","last_name":"Allen","password":"roballen","admin_right_id":"2"},{"email_id":"rob_ena@gmail.com","user_name":"robad","first_name":"Roben","last_name":"Lena","password":"aleno","admin_right_id":"1"}]

您可以看到它是两个对象中的数组，但我无法访问这些对象的属性，即使我可以将其与ng-repeat一起使用。请参阅以下代码段：

<li ng-repeat="emp in availableEmployees">
    <label  class="btn btn-primary" ng-model="checkModel" btn-checkbox>
        HELLO {{emp.user_name}}
    </label>
</li>

该代码生成两个列表项但没有文本。

以下图片来自调试控制台，检查employees对象： enter image description here

我对网络开发很陌生，希望有人能帮助我！我已经做了很多调试，但不想再这个帖子膨胀，所以只要问你是否需要任何特定的信息。

Answer 1

对服务器的调用是异步的。在您的工厂代码中，您要将employees分配给$http.get的返回值，该值返回a promise。

因此，在HTML中，您将重复承诺对象的属性。这就是为什么你得到那个奇怪的输出。然而，控制台日志会记录正确的数据，但该数据（如我所说）未设置为您重复的属性。

您应该更新工厂代码，将承诺的结果设置为employees变量而不是承诺本身：

factory.getEmployeesFromServer().then(function(data){
    factory.employees = data;
});

factory.getEmployeesFromServer = function() {
        return $http.get("http://localhost/scrumboard/get_user.php")
            .success(function(response) {
                 for(var property in response) {
                    console.log("PROP: "+property);
                    if (response.hasOwnProperty(property)) {
                       console.log("Has ownProperty: " + property)
                    }
                }
                    console.log(JSON.stringify(response));
                    return response.data;

            })
        .error(function(response, status, headers, config) {

        })
}

Answer 2

我认为您可能在视图中引用了ng-repeat行中的错误变量我将替换availableEmployees与员工，看看是否修复了它，因为它似乎是你分配给你的范围。

<li ng-repeat="emp in employees">
<label  class="btn btn-primary" ng-model="checkModel" btn-checkbox>
    HELLO {{emp.user_name}}
</label>
</li>

Answer 3

您的代码存在的问题是factory.getEmployeesFromServer不会返回员工列表，它是异步的。你可以做的，就是只返回工厂的承诺，如下：

factory.getEmployeesFromServer = function() {
        return $http.get("http://localhost/scrumboard/get_user.php");
};

然后要获得您的雇主列表，您需要将呼叫回传给success方法，此回叫应该在模型上分配您需要的值（让我们说{{1 }}）应该在您的控制器emp（$scope）上，如下所示：

$scope.emp

无法使用从JSON解析的JavaScript对象

3 个答案: