CODEWITHSUNDEEP
javascriptangularjsangular-promiseangular-services
BleachedAxe
BleachedAxe

Reputation: 403

How to return data from a service as a promise in AngularJS?

I am trying to send data from a service as a promise to my controller but had no luck after trying out a few options. The http service by default returns a promise, but I want to send data as promise from one controller to another. My service class looks like: The add functions are there to set data from another controller and the get functions are to get that data in another controller.

Services

    return {


      add : function(incategories){
      categories=incategories;
      console.log(subcategories)
    },

       addcatname:function(incat){
       category=incat
       console.log(category)
    },


      get : function(){
      return categories;
      console.log(category)
       },

       getcatname:function(){
        return category;
       },

And the function that gets data from the controller looks like this.

Controller

 vm.getSub=function(){
          vm.category=CategoryService.getcatname();
          vm.subcategories=CategoryService.get();
          vm.index = 0;
          vm.array1 = [];
          for(var i=0; i<vm.subcategories.length/2;i++)
          vm.array1.push(i);    
          return true;
 }

The code where the values are being set is:

vm.submit=function(category){
          subCategoryService.getsubCategories(category).then(function (response) 
         {
            console.log(response)
            CategoryService.addS(response.data.data.category_name);
            CategoryService.addsub(response.data.data.sunbcategories);


                                        })
            $location.path('/subcategory');    

}

My HTML 

<h1 class="header">{{'CATEGORY'|translate}}</h1><br>
<div ng-controller="CategoriesController as catCtrl" class="category-content">
    <table class="table-content" class="category-content" ng-show="catCtrl.getcategories()">
<tr ng-repeat="i in catCtrl.array"  ng-init="index = i*2">
    <td layout-align="space-around center" ng-repeat="category in catCtrl.categories.slice(index,index+2)" >


            <md-button md-whiteframe="6" ng-click="catCtrl.submit(category)" class="category-button"  aria-label="{{category}}">
               <div class="category-button-text-translation">{{category|uppercase| translate}}</div>
                <img ng-src="assets/images/categories/{{category}}.png" alt="{{category}}">
                <div class="category-button-text-english">{{category|lowercase}}</div>
            </md-button>
            <span flex></span>
     </td>
</tr>
    </table>
</div>

The data from subCategoryService.getsubCategories(category) is from $http service and after getting that data i am setting the values in a service so another controller can access them.

Now i want the first two lines of the function to receive the data as promises from the service. How will I be able to accomplish this? Before, every time I was getting data was from $http service so I had no problems but i am kind of lost right now. Thanks!!

Upvotes: 1

Views: 1007

Answers (1)

Jameel Moideen
Jameel Moideen

Reputation: 7931

If you want to make the get and getcatname to custom promise you should have to use $q service. In inorder to do that inject $q service on your service and use like below

  getcatname:function(){
      //$q please inject $q on your service
       ̶l̶e̶t̶ ̶d̶e̶f̶e̶r̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶

         ̶d̶e̶f̶e̶r̶.̶r̶e̶s̶o̶l̶v̶e̶(̶c̶a̶t̶e̶g̶o̶r̶y̶;̶)̶
      return ̶d̶e̶f̶e̶r̶.̶p̶r̶o̶m̶i̶s̶e̶;̶ $q.resolve(category);
    }

in the controller you can get this category with promise callback

CategoryService.getcatname.then(function(response){

vm.category=response;
});

https://docs.angularjs.org/api/ng/service/$q

Upvotes: 1

Related Questions