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

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?

@james thank you. I'm reading about it now at https://docs.angularjs.org/api/ng/service/$q. I think this is the way. Meanwhile could you explain me how would you solve my problem using your solution. Just to have a reference on how promises should be used. — Thiezar
– Thiezar, Commented Dec 10, 2014 at 14:13

Community · Accepted Answer · 2017-05-23 12:32:11Z

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);
  }
);

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related