Can't use JavaScript objects parsed from JSON

Question

I am using AngularJS to build a web application. I have a server running PHP which fetches some data from the SQL-database and encodes it to JSON. On the client side I make use of the Angular $http service to fetch it, parse it and it succeeds, however I am not able to use the variable assigned with the fetched data. This is the code to perform the HTTP request:

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) {

            })
    }

The print of the properties just contains zeroes and ones. However when the Stringify-print reaches the console it looks like this:

[{"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"}]

You can see that it is an array out of two objects, but I cannot access these properties of the objects, even though I can use it with an ng-repeat. See the following snippet:

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

That code produces two list items but no text.

The following image is from the debug console, inspecting employees object: enter image description here

I am quite new to web development and hope someone could help me out! I have done a lot more debugging but dont want to bloat this post no more, so just ask if you need any specific info.

Have you used the controller. Can you create plunker? – Reena Apr 07 '15 at 11:32 — Reena, Apr 07 '15 at 11:32

score 1 · Accepted Answer · answered Apr 07 '15 at 11:52

The call to your server is asynchronous. In your factory code you are assigning employees to the return value of $http.get, which returns a promise.

So in your HTML, you are repeating over the properties of a promise object. Which is why you get that strange output. The console log does however log the correct data, but that data is (like I said) not set to the property you are repeating over.

You should update your factory code to set the result of the promise to the employeesvariable instead of the promise itself:

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) {

        })
}

score 0 · Answer 2 · answered Apr 07 '15 at 11:48

I think you may be referencing the wrong variable in your ng-repeat line in your view.
I would replace availableEmployees with employees and see if that fixes it as that is what it you appear to be assigning to your scope.

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

Khalid · Answer 3 · 2015-04-07T13:04:45.650

The problem on your code is that factory.getEmployeesFromServer will not return the list of employees, it's asynchronous. what you can do, is to return only the promise from the factory, like this :

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

then to get the list of your employers, you need to pass a call back to the success method, this call back should assign the values you need on a model (let's say emp) which should be on your controller $scope ($scope.emp), like this:

promise = factory.getEmployeesFromServer();
promise.success(function(response) {
    $scope.emp = response.data;
});

Can't use JavaScript objects parsed from JSON

3 Answers3