CODEWITHSUNDEEP
angularjsangular-promiseangularjs-http
stack questions
stack questions

Reputation: 982

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

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();

Upvotes: 0

Views: 208

Answers (2)

georgeawg
georgeawg

Reputation: 48968

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();
});

Upvotes: 3

Vinoth
Vinoth

Reputation: 1113

you should get the data like this

var getclients= function(){

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


getclients();

Upvotes: 0

Related Questions