How to make the controller wait for the service to return a value and how to access the return value in the controller?

Question

I am new to angularjs . I am having problems accessing the value that is returned from the angularjs service in the controller . Below is the code in the controller:

'use strict'; app.controller('AdminTaskCtrl', function ($scope, Search) { $scope.buildEnquiry = function (collegeId, ) { Search.getIdByEmail(collegeId).then ( function ( result ) { $scope.uId = result; console.log($scope.uId); }); }; });//controller ends here 

And the code in the search service is as follows:

 'use strict'; app.factory('Search',function ($firebase, FIREBASE_URL, $rootScope) { var simpleuser = ""; getIdByEmail: function(counsellorEmail) { var collegeuserArray = ($firebase(new Firebase(FIREBASE_URL+"abc/def/")).$asArray()); collegeuserArray.$loaded(function(collegeuserArray) { for(var i=0; i<collegeuserArray.length; i++) { if((collegeuserArray[i].$value) == counsellorEmail) { simpleuser = collegeuserArray.$keyAt(collegeuserArray[i]); console.log(simpleuser); return simpleuser; } } }, function(error) { console.error("Error:", error); }); } }; );//service ends here. 

When the code is executed, it gives an error for the function. then as vapor:

TypeError: undefined is not a function , and the value in the controller is not available.

Please, help.

Answer 1

 'use strict'; app.factory('Search',function ($firebase, FIREBASE_URL, $rootScope, $q) { var simpleuser = ""; getIdByEmail: function(counsellorEmail) { var deferred = $q.defer(); var collegeUserArray = ($firebase(new Firebase(FIREBASE_URL+"abc/def/")).$asArray()); collegeUserArray.$loaded(function(collegeUserArray) { for(var i=0; i<collegeUserArray.length; i++) { if((collegeUserArray[i].$value) == counsellorEmail) { simpleUser = collegeUserArray.$keyAt(collegeUserArray[i]); console.log(simpleUser); //return simpleUser; deferred.resolve(simpleUser); } } }, function(error) { console.error("Error:", error); deferred.reject(error); }); return deferred.promise; } }; ); 

And your controller

 'use strict'; app.controller('AdminTaskCtrl', function ($scope, Search) { $scope.buildEnquiry = function (collegeId, ) { Search.getIdByEmail(collegeId).then ( function ( result ) { $scope.uId = result; console.log($scope.uId); }, function(error){ //If an error happened, handle it here }); }; }); 

Answer 2

To answer your question, $loaded returns a promise , so the simplest answer here would be to return it from your service to worry about $ q and all that.

It seems that this whole premise is erroneous here and that this is an XY problem. It seems that a few hacks designed to undermine the intended use of these libraries and as a good, solid read of Angular walkthrough and AngularFire Guide will save a ton of unnecessary complexity here.

Using the factory here is subversive and closely related. The syntax is invalid and does not compile. And ultimately, the goal is to add a search method to the synchronized array returned from AngularFire, which must be executed using $ extendFactory.

 app.factory('firebaseRef', function(FIREBASE_URL) { return function(path) { var ref = new Firebase(FIREBASE_URL); if( path ) { ref = ref.child(path); } return ref; } }); app.factory('SearchableArray', function($firebase, $FirebaseArray) { var ArrayWithSearch = $FirebaseArray.$extendFactory({ searchByEmail: function(emailAddress) { var res = null; for(var i=0, len=this.$list.length; i < len; i++ ) { if( this.$list[i].email === emailAddress ) { res = this.$list[i]; break; } } return res; } }); return function(ref) { return $firebase(ref, {arrayFactory: ArrayWithSearch}).$asArray(); } }); app.controller('Controller', function($scope, SearchableArray, firebaseRef) { $scope.data = SearchableArray( firebaseRef('abc/def') ); $scope.search = function(email) { console.log( $scope.data.searchByEmail(email) ); }; });