How to return an object from angular service to controllers

Tags: angularjs
Question!

I have the following service,

 .service('indexDBService', function ($indexedDB, firebaseService) {
   var objects = [];
   var addToVideos = [];
   var _this = this;

     firebaseService.getvideosApi().then(function(response){
          _this.videos = response.data;
          var userVideos = _this.videos;
          for (var key in userVideos) {
            if (userVideos.hasOwnProperty(key)) {
               var video = {"file_id": userVideos[key].file_id, "filename": userVideos[key].filename, "file_status": userVideos[key].file_status, "user_id": userVideos[key].user_id, "video_avatar": userVideos[key].video_avatar, "upload_date": userVideos[key].upload_date, "file_dislikes": userVideos[key].file_dislikes, "file_likes": userVideos[key].file_likes, "downloadUrl": userVideos[key].downloadUrl}
            addToVideos.push(video);
            }
          }
          if((objects.length) < (Object.keys(_this.videos).length)){

            $indexedDB.openStore('userVideos', function(store){
              store.upsert(addToVideos).then(function(e){
                // do something
              });
            });

          }
        });
       //get indexDB Videos
        $indexedDB.openStore('userVideos', function(store){
           store.getAll().then(function(userVideos) { 
            objects = userVideos;
            _this.vObjects = objects;
            });
        });
      });

I would like to get the vObjects in my controllers so I can use there. How do I return or past the _this.vObjects to my controllers?



Answers

Since this is an angular service you should be working with promises. Promises allow you to access asynchronous data, you are using them with firebase and inddxdb services. Im going to assume you are using _this.vobject to cache the data in the service so you don't need to make the request each time. I would inject $q into your service like this

. service('indexDBService',function($indexedDB, firebaseService,$q)

$q is an API that allows you to construct promises. In an angular service you expose methods by adding them to this. In order to create a method to get your data you would construct it like this.

this.getVobj = function(){ 

    var deferred = $q.defer()

    if(_this.vObjects){
       deferred.resolve(_this.vObjects);
     } else {

$indexedDB.openStore('userVideos', function(store){
       store.getAll().then(function(userVideos) { 
        objects = userVideos;
        _this.vObjects = objects;
       deferred.resolve(objects);
        });
    });
}

   return deferred.promise;

};

Then to get it in your controller you inject your service.

myModule.controller('myCtrl', function(indexDBService){
           indexDBService.getVobj().then(function(vObj){
              //Do stuff with vobj
           });
});


Just you need to add two lines of code in both of your click functions.

First you need to find the checkbox of that particular item and then checked/unchecked depends on the quantity.

   var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
   checkBox.prop('checked', true);

Now, when we click on the plus/minus button we are finding parents of the and getting the input type checkbox so that once we get the particular element then depends on quantity we can do check/uncheck

checkBox.prop('checked', true);   // when qty > 0
checkBox.prop('checked', false);  // when qty == 0

By this you can achieve your requirement.

The below will work perfectly

 $( document ).on( "click", ".qty-addon-plus", function() {
   var parent=$(this).parent().parent();       
   var child=parent.find(".addon_qty");        
   var qty=parseFloat(child.val())+1;          
   if (isNaN(qty)){
        qty=1;
   }
   child.val( qty );

   var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
   checkBox.prop('checked', true);

 });

 $( document ).on( "click", ".qty-addon-minus", function() {
   var parent=$(this).parent().parent();       
   var child=parent.find(".addon_qty");           
   var qty=parseFloat(child.val())-1;
   if (qty<0){
        qty=0;
   }
   child.val( qty );

   var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
   if (qty == 0) {
       checkBox.prop('checked', false);
   } 

  });

Hope this helps. Thanks !



You may use .closest('.row.top10') to get the parent row and

$(document).on('input', 'input.numeric_only.addon_qty', 

to test the input values.

$( document ).on( "click", ".qty-addon-plus", function() {
  var parent=$(this).parent().parent();
  var child=parent.find(".addon_qty");
  var qty=parseFloat(child.val())+1;
  if (isNaN(qty)){
    qty=1;
  }
  child.val( qty );
  $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', true);
});

$( document ).on( "click", ".qty-addon-minus", function() {
  var parent=$(this).parent().parent();
  var child=parent.find(".addon_qty");
  var qty=parseFloat(child.val())-1;
  if (qty<0){
    qty=0;
  }
  child.val( qty );
  if (qty <= 0) {
    $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', false);
  }
});

$(document).on('input', 'input.numeric_only.addon_qty', function(e) {
   $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', this.value != '0');
});
body{
  margin:20px;
}
.section-label{
  margin-bottom:40px;
}
.green-button {
  /* background: #26d469; */
  background: #00b279;
  border: 0px solid #00b279;
  color: #fff;
  padding: 5px 8px;
}
.row{
  margin-bottom:10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="row top10">
    <div class="col-md-5 col-xs-5 border into-row">
        <input value="29|5|Pepperoni|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9"
               type="checkbox" name="sub_item[9][0]" id="sub_item_9_0"> Pepperoni</div> <!--col-->

    <div class="col-md-4 col-xs-4 border into-row ">
        <div class="row quantity-wrap-small">
            <div class="col-md-3 col-xs-3 border ">
                <a href="javascript:;" class="green-button inline qty-addon-minus">-</a>
            </div>
            <div class="col-md-5 col-xs-5 border">
                <input class="numeric_only left addon_qty" maxlength="5" type="text" value="0" name="addon_qty[9][0]" id="addon_qty_9_0">	             </div>
            <div class="col-md-3 col-xs-3 border ">
                <a href="javascript:;" class="green-button inline qty-addon-plus">+</a>
            </div>
        </div>

    </div> <!--col-->

    <div class="col-md-3 col-xs-3 border text-right into-row">
	        <span class="hide-food-price">
	           <small>$</small>5</span>
    </div>
    <!--col-->
</div> <!--row-->


<div class="row top10">
    <div class="col-md-5 col-xs-5 border into-row">
        <input value="30|2|Ham|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9"
               type="checkbox" name="sub_item[9][1]" id="sub_item_9_1"> Ham</div> <!--col-->

    <div class="col-md-4 col-xs-4 border into-row ">
        <div class="row quantity-wrap-small">
            <div class="col-md-3 col-xs-3 border ">
                <a href="javascript:;" class="green-button inline qty-addon-minus">-</a>
            </div>
            <div class="col-md-5 col-xs-5 border">
                <input class="numeric_only left addon_qty" maxlength="5" type="text" value="0" name="addon_qty[9][1]" id="addon_qty_9_1">	             </div>
            <div class="col-md-3 col-xs-3 border ">
                <a href="javascript:;" class="green-button inline qty-addon-plus">+</a>
            </div>
        </div>

    </div> <!--col-->

    <div class="col-md-3 col-xs-3 border text-right into-row">
	        <span class="hide-food-price">
	           <small>$</small>2</span>
    </div>
    <!--col-->
</div> <!--row-->

By : gaetanoM


This video can help you solving your question :)
By: admin