Unable to utilize JavaScript objects extracted from JSON

Question

Unable to utilize JavaScript objects extracted from JSON

Working on developing a web application using AngularJS has led me to encounter an issue. I have a PHP server that retrieves data from an SQL database and encodes it into JSON. Utilizing the Angular $http service on the client side, I am able to successfully fetch and parse the data. However, I am facing difficulty in utilizing the variable assigned with the fetched data.

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 only shows zeros and ones, but when the Stringify-print prints to the console, it displays the data correctly as an array with two objects:

[{"email_id":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e6fbf6cbf1fad4f3f9f5fdf8baf7fbf9">[email protected]</a>","user_name":"rob","first_name":"Robert","last_name":"Allen","password":"roballen","admin_right_id":"2"},{"email_id":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5c414c714b404f6e49434f4742004d4143">[email protected]</a>","user_name":"robad","first_name":"Roben","last_name":"Lena","password":"aleno","admin_right_id":"1"}]

Although I can use ng-repeat to loop through the data with the code snippet below, it does not display any text:

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

Debugging further, I inspected the employees object as shown in the image below:

Seeking assistance as a relative newcomer to web development and willing to provide more details upon request!

javascript json angularjs

Answer 1

Answer №1

Your server call operates asynchronously. Within your factory code, you are linking the employees variable to the result of $http.get, which yields a promise.

Consequently, in your HTML, you are iterating over the properties of a promise object, leading to the bizarre output you are witnessing. Nevertheless, the console log accurately displays the data, although it is not associated with the property being iterated over.

To rectify this issue, adjust your factory code so that the outcome of the promise is assigned to the employees variable rather than 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) {

        })
}

Answer 2

Your server call operates asynchronously. Within your factory code, you are linking the employees variable to the result of $http.get, which yields a promise.

Consequently, in your HTML, you are iterating over the properties of a promise object, leading to the bizarre output you are witnessing. Nevertheless, the console log accurately displays the data, although it is not associated with the property being iterated over.

To rectify this issue, adjust your factory code so that the outcome of the promise is assigned to the employees variable rather than 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) {

        })
}

Answer 3

Answer №2

It seems like you might be using the wrong variable in your ng-repeat statement within your view.
Try replacing availableEmployees with just employees and check if that resolves the issue, as it seems to be what you are assigning to your scope.

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

Answer 4

It seems like you might be using the wrong variable in your ng-repeat statement within your view.
Try replacing availableEmployees with just employees and check if that resolves the issue, as it seems to be what you are assigning to your scope.

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

Answer 5

Answer №3

Your code has a problem because factory.getEmployeesFromServer does not immediately return the list of employees since it is asynchronous. One solution is to modify the factory function to only return the promise like so:

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

To access the list of employees, you will need to provide a callback function to the success method. This callback function should assign the necessary values to a model (for example emp) within your controller's $scope ($scope.emp), like this:

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

Answer 6

Your code has a problem because factory.getEmployeesFromServer does not immediately return the list of employees since it is asynchronous. One solution is to modify the factory function to only return the promise like so:

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

To access the list of employees, you will need to provide a callback function to the success method. This callback function should assign the necessary values to a model (for example emp) within your controller's $scope ($scope.emp), like this:

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

Unable to utilize JavaScript objects extracted from JSON

Answer №1

Answer №2

Answer №3

Similar questions

Ways to attach dynamic methods within a v-for loop

Ignoring templateUrl in AngularJS and Karma-Jasmine to prevent the occurrence of "Unexpected request: GET .../.html" error

Learn the steps to successfully select a drop-down option by clicking on a button

Is file timestamp utilized by Apache to verify if a resource has been changed?

Angular: attaching an identification number to an API endpoint

Executing a javascript function from PHP when a form is submitted: a comprehensive guide

Angular JS: Distribute objects from a single array to various arrays or services

Issues with CSS and Node Express

Determine the Total of a Column in jqgrid

Using jquery and Ajax to extract data from nested JSON structures

Adding tween.js seems to have caused the button click event to stop triggering

Scrollable container with jQuery draggable functionality

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

What is the method to retrieve the color of a linearGradient in an SVG at a particular

Having trouble converting a JSON array into a JavaScript array upon creation

Conceal the Navigation Bar Upon the Pop Up's Appearance

Clicking buttons in AngularJS

Tips for managing the State with AppContext()---Need help figuring out how to handle

Extract JSON array without any accompanying objects

Elements that are added dynamically will not inherit the correct CSS styles, requiring JavaScript to style them properly