How to use Parse JS SDK in Angular.js service? - angularjs

Question

I'll explain my problem with a quick example.
Parse.initialize("nlxy5xYYZQ1fLfFkzcyLHOifkie1dOU0ZSxoxw1w", "IRBJO7nyd1vQquhMvnyMd298ZVJ0qWg1AjxBY5nr");
var People = Parse.Object.extend("People");
var app = angular.module('app', []);
app.controller("MyCtrl", ["$scope", "PeopleService", function($scope, PeopleService){
$scope.people = PeopleService.getPeople();
}]);
app.service("PeopleService", function(){
var people = null;
return {
getPeople: function(){
people = [];
var queryObject = new Parse.Query(People);
queryObject.find({
success: function (results) {
for (var i = 0; i < results.length; i++) {
var result = results[i];
people.push(result.get("name"));
}
return people;
},
error: function (error) {
console.error("Error: " + error.code + " " + error.message);
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<script src="https://www.parsecdn.com/js/parse-1.3.2.min.js"></script>
<div ng-app="app">
<ul ng-controller="MyCtrl">
<li ng-repeat="person in people">{{person}}</li>
</ul>
</div>
Now, of course, the scope in the controller doesn't update when the data is returned by Parse.
How can I make this service work properly?

Answer 1

As #james stated before, using promises in $q service is what you are looking for. Here's how it could go with your example.
getPeople: function(){
var deferred = $q.defer();
people = [];
var queryObject = new Parse.Query(People);
queryObject.find({
success: function (results) {
for (var i = 0; i < results.length; i++) {
var result = results[i];
people.push(result.get("name"));
}
deferred.resolve(people);
},
error: function (error) {
deferred.reject(error);
}
});
return deferred.promise;
}
This returns a promise which you can use like this
$scope.people = PeopleService.getPeople();
or
$scope.people = PeopleService.getPeople()
.then(function(people) {
//modify data as necessary
return people
}, function(reason) {
alert('Failed: ' + reason);
}
);