Difficulty in calling function properly in angular js

Question

i have a function attached to angular app module through "app.factory" which has certain http requests in it. That function is invoked in the controller and the returned data from function is assigned to a scope variable in controller.

Problem is controller is being executed first and then the http requests in the function are executed due to which the data coming from http request can't be captured into scope variable. How that can be corrected.

function resourceapp.factory('dataService', function($http){
  var data = {};
  data.EnterprisePrograms = [];
  data.Resources=[];
  data.Skills=[];
  data.Allocations=[];

  Execution = function($http) {
    $http.get('http://localhost:8080/api/enterpriseProgram')
      .then(function(resources) {
        data.EnterprisePrograms=resources.data;
      });

    $http.get('http://localhost:8080/api/resource')
      .then(function(resources) {
        data.Resources=resources.data;
      });

    $http.get('http://localhost:8080/api/skill')
      .then(function(resources) {
        data.Skills=resources.data;
      });

    $http.get('http://localhost:8080/api/allocation')
      .then(function(allocation) {
        data.Allocations = allocation.data;
      });
  }

  return data;
});

controller

resourceapp.controller('AllocationList', function($scope, dataService) {
  $scope.allocationList = dataService.Allocations;
});

anoop · Accepted Answer · 2017-05-17 12:32:11Z

2

It should be like :

In factory : Create a method to return promise.

 resourceapp.factory('dataService', function($http){
    var data = {};

    data.getEnterprisePrograms = function($http){
        return $http.get('http://localhost:8080/api/enterpriseProgram');
      }

    data.getResourceData = function($http) {   
        return $http.get('http://localhost:8080/api/resource');
      }

    data.getSkillData = function($http) {
       return $http.get('http://localhost:8080/api/skill');
      }

    data.getAllocationData = function($http) {   
       return $http.get('http://localhost:8080/api/allocation');
    }

    return data;
});

In Controller, call the factory method to fetch promise and resolve them with $q.all()

 resourceapp.controller('AllocationList', function($scope, dataService, $q){
              var allocationPromise = dataService.getAllocationData();
              var skillPromise= dataService.getSkillData();
              // other promise

 $q.all([allocationPromise,skillPromise, ..other promise]).then(function (result) {
              $scope.allocationData = result[0].data;
             $scope.skillData = result[1].data;
              // other data
          })
 });

See this for $q.all()

edited May 17, 2017 at 12:32

answered May 17, 2017 at 11:59

anoop

3,8222 gold badges18 silver badges28 bronze badges

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

5 Comments

anoop Over a year ago

@Founded1898 : you probably right, I updated the answer.

Sakky Over a year ago

It still doesn't populates the $scope.allocationList due to execution order @anoop

anoop Over a year ago

@Sakky : what is execution order, I don't see your call (atleast from frontend) dependent on any other call data?

Sakky Over a year ago

@anoop: An object needs to be created with all the data from http responses hence all the queries needs to be executed and respective variables should be populated and called into controller. but controller is getting executed first due and at last http requests and executed due to being async.

anoop Over a year ago

@Sakky : In controller through $q.all() you have all data in result array, now you can assign same data to1 or multiple properties of controller. like = $scope.data.allocationList = result[index].data and $scope.data.resource = result[index].data . then you finally have all data in single property $scope.data, and make a separate boolean flag when all data is loaded. like $scope.allaDataLoaded = true;

Fabio Campinho · Accepted Answer · 2017-05-17 12:05:07Z

1

You could also create a function for each $http.get using promises.

EnterprisePrograms = function(){
    return $http.get('http://localhost:8080/api/enterpriseProgram')
        .then(function(resources){
            return resources.data;
        });
}
Resources = function(){
    return $http.get('http://localhost:8080/api/resource')
    .then(function(resources){
        return resources.data;
    });
}
Skills = function(){
    return $http.get('http://localhost:8080/api/skill')
    .then(function(resources){
        return resources.data;
    });
}
Allocations = function(){
    return $http.get('http://localhost:8080/api/allocation')
    .then(function(allocation){
        return allocation.data;
    });
}

answered May 17, 2017 at 12:05

Fabio Campinho

1,0229 silver badges13 bronze badges

1 Comment

Sakky Over a year ago

An object with the the results of all the http requests needs to be made

Collectives™ on Stack Overflow

Difficulty in calling function properly in angular js

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related