How to Load data in AngularJS when control loads?

Question

I have an AngularJS controller; On the first load the data is not fetching from db

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) {
    console.log("ProductPopupController");

    var allGroups = [];
    $http.get('UserDetail/GetAllUsers').success(function (response) {
        console.log("I got the data I requested");
        //console.log(response);
        for (var i = 0; i < response.length; i++) {
            allGroups.push({
                UserName: response[i].UserName,
                _id: response[i]._id
            });
        }
    });


    console.log(allGroups);

    var allGroups = [
                    { 'UserName': 'one', '_id': 1 },
                    { 'UserName': 'two', '_id': 2 },
                    { 'UserName': 'three', '_id': 3 },
                    { 'UserName': 'four', '_id': 4 },
                    { 'UserName': 'five', '_id': 5 },
                    { 'UserName': 'six', '_id': 6 },
                    { 'UserName': 'sixteen', '_id': 7 },
                    { 'UserName': 'seven', '_id': 8 }

                ];

    console.log(allGroups);

In this code I am getting the value from second array. Not getting from the db. After any event it will load from db. Whats wrong I have done here?

Just FYI $http().success() and .error have been deprecated. They were helper methods that wrapped .then and .catch and caused issues if you tried to use .success half way through a $http promise chain. .then and .catch should be used instead. — ste2425
– ste2425, Commented May 5, 2016 at 10:35

Claies · Accepted Answer · 2016-05-05 10:30:42Z

2

This is happening because $http.get() is Asynchronous. You are making the call to $http.get(), then immediately making the call to console.log(allGroups) before the result has been retrieved.

As soon as the data has been retrieved and the .success() fires, Angular will fire a digest cycle, causing the data to update and be pushed into the array. However, this happens long after the controller has finished, so the data is never printed in the console.log().

answered May 5, 2016 at 10:30

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pradeep Over a year ago

Any solution for to achieve my result on load?

Claies Over a year ago

It is happening on load already, but the browser doesn't wait for it to load before doing other tasks. That's the point of an async call. Don't try to log the async call outside the .success(), instead, initialize the array first, then log the change to the array inside the .success(). (side note: .success() is deprecated, use .then() instead).

Pradeep Over a year ago

Actually my requirement is to load a md-chip by using md-autocomplete. In the above example how to achieve this by using .then()?

Claies Over a year ago

I'm not sure what you are asking here. If a display element isn't showing the data that is being loaded, you should show the code for that element in your example. As for using .then, there are plenty of articles describing it's use, I just didn't post any because it didn't seem to be the main point of the question.

Simon Schüpbach · Accepted Answer · 2016-05-05 10:30:08Z

0

Please note that $http.get('UserDetail/GetAllUsers') is an asynchronous call. You print out your variable allGroups before you receive the response of your request. If you add a console.log at the end of success function, you will see, that the data is set.

answered May 5, 2016 at 10:30

Simon Schüpbach

2,6833 gold badges15 silver badges26 bronze badges

Comments

Pradeep · Accepted Answer · 2016-05-05 11:01:35Z

This is my full code to load md-chips (Angular material) by using md-qutocomplete

app.controller("ProductPopupController", function ($scope, $http, $mdDialog, $filter) {
    console.log("ProductPopupController");

    var allGroups = [];
    $http.get('UserDetail/GetAllUsers').success(function (response) {
        console.log("I got the data I requested");
        for (var i = 0; i < response.length; i++) {
            allGroups.push({
                UserName: response[i].UserName,
                _id: response[i]._id
            });
        }
        console.log(1);
        console.log(allGroups);
    });

    console.log(2);
    

    var allGroups = [
                    { 'UserName': 'one', '_id': 1 },
                    { 'UserName': 'two', '_id': 2 },
                    { 'UserName': 'three', '_id': 3 },
                    { 'UserName': 'four', '_id': 4 },
                    { 'UserName': 'five', '_id': 5 },
                    { 'UserName': 'six', '_id': 6 },
                    { 'UserName': 'sixteen', '_id': 7 },
                    { 'UserName': 'seven', '_id': 8 }

    //            'one',
    //            'two',
    //            'three',
    //            'four',
    //            'five',
    //            'six',
    //            'sixteen',
    //            'seven'
                ];

    console.log(allGroups);

    $scope.queryGroups = function (search) {
        var firstPass = $filter('filter')(allGroups, search);

        return firstPass.filter(function (item) {
            return $scope.selectedGroups.indexOf(item) === -1;
        });
    };

    $scope.addGroup = function (group) {
        $scope.selectedGroups.push(group);
    };

    $scope.allGroups = allGroups.UserName;
    $scope.selectedGroups = [allGroups[0]];

    $scope.$watchCollection('selectedGroups', function () {
        $scope.availableGroups = $scope.queryGroups('');
    });

    $scope.getChipInfo = function (chip_info) {
        console.log(chip_info);
    }

Collectives™ on Stack Overflow

How to Load data in AngularJS when control loads?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related