Data from database is not loaded to a variable on page load using angular

Question

On page load, I get data from a database and place it in $scope.x. In my network tab, I get the list from my database but it is not loaded to the variable which I will soon be needing in a dropdown list by using ng-repeat. After the page load, however, when I click a button that retrieves data and place it in the $scope.x, I get the values already. If I do it like, I don't get the values on page load and just click the button that retrieves the data to the variable, I do not get anything as well. What am I doing wrong. Below is my code:

$scope.addProject = function () {
    debugger;
    console.log($scope.clientList);
    console.log($scope.userList);
};

$scope.getClients = function () {
    debugger;
    $http.get('/Clients/GetClients')
        .then(function (response) {
            $scope.clientList = response.data;
        });
};

$scope.getAllUsers = function () {
    debugger;
    $http.get('/User/GetAllUsers')
        .then(function (response) {
            $scope.userList = response.data;
        })
};

$scope.getClients();
$scope.getAllUsers();
$scope.addProject();

georgeawg · Accepted Answer · 2017-12-18 06:09:23Z

3

The addProject function is being called before the data is returned from the server.

Modify the getClients and getAllUsers function to return promises:

$scope.addProject = function () {
    debugger;
    console.log($scope.clientList);
    console.log($scope.userList);
};

$scope.getClients = function () {
    debugger;
    ̲r̲e̲t̲u̲r̲n̲ $http.get('/Clients/GetClients')
        .then(function (response) {
            $scope.clientList = response.data;
        });
};

$scope.getAllUsers = function () {
    debugger;
    ̲r̲e̲t̲u̲r̲n̲ $http.get('/User/GetAllUsers')
        .then(function (response) {
            $scope.userList = response.data;
        })
};

Then use $q.all to wait for the promises:

var clientsPromise = $scope.getClients();
var allUsersPromise = $scope.getAllUsers();

$q.all([clientsPromise, allUsersPromise])
  .then(function() {
    $scope.addProject();
});

answered Dec 18, 2017 at 6:09

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

3 Comments

georgeawg Over a year ago

The $q service needs to be injected into the controller the same way that you injected the $http service.

stack questions Over a year ago

Wow! That worked! Can you please explain why it didn't work on my original code also why do we need to add the $q.all or promise?

georgeawg Over a year ago

Read You're Missing the Point of Promises.

Vinoth · Accepted Answer · 2017-12-18 06:08:22Z

0

you should get the data like this

var getclients= function(){

    debugger;
    console.log($scope.clientList);
    console.log($scope.userList);
};


getclients();

edited Dec 18, 2017 at 6:08

answered Dec 18, 2017 at 5:43

Vinoth

1,1031 gold badge18 silver badges53 bronze badges

3 Comments

stack questions Over a year ago

I am invoking the $scope.getClients() and $scope.getAllUsers() on page load already. Please check my code, It is at the bottom of the code.

Vinoth Over a year ago

@stackquestions, instead of $scope.getClients() you have to use getClients() see my answer my clear I am calling scope inside variable.

stack questions Over a year ago

Now the addProjects is not being invoked when I apply your suggestion. Please see my updated code.

Collectives™ on Stack Overflow

Data from database is not loaded to a variable on page load using angular

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related