Javascript angular parse queries synchronously (in sequence)

Question

I am trying to use Parse in javascript to make two queries synchronously in sequence:

var innerQuery = new Parse.Query(Attendees);
    innerQuery.equalTo("user_id",$localStorage.username);
    innerQuery.equalTo("status","confirmed")
    innerQuery.equalTo("code_verified",false)

    var innerQuerytrue = new Parse.Query(Attendees);
    innerQuerytrue.equalTo("user_id",$localStorage.username);
    innerQuerytrue.equalTo("status","confirmed")
    innerQuerytrue.equalTo("code_verified",true)


    innerQuery.find({}) 
    innerQuerytrue.find({}) 


    var eventDetails = []

    var queryfalse = new Parse.Query(Events)
    queryfalse.matchesKeyInQuery("id_event","event_id",innerQuery);

    var querytrue = new Parse.Query(Events)
    querytrue.matchesKeyInQuery("id_event","event_id",innerQuerytrue);


    queryfalse.find().then(function(results){
        for (var i in results) {
              var object = results[i];
              var eventId = object.get("id_event");
              var eventname = object.get("event_name");
              var datestart = object.get("date_start");
              var location = object.get("location");
              var eventimagefile = object.get("event_image");
              var eventimageurl = eventimagefile.url();
              eventDetails.push({'name':eventname,'eventId':eventId, 'location':location, 'datestart':datestart, 'eventphoto':eventimageurl,'verified':false})      
        }

    }).then(function(){
        querytrue.find().then(function(results1){
            for (var i in results1) {
                  var object = results1[i];
                  var eventId = object.get("id_event");
                  var eventname = object.get("event_name");
                  var datestart = object.get("date_start");
                  var location = object.get("location");
                  var eventimagefile = object.get("event_image");
                  var eventimageurl = eventimagefile.url();
                  eventDetails.push({'name':eventname,'eventId':eventId, 'location':location, 'datestart':datestart, 'eventphoto':eventimageurl,'verified':true})      
            }
        })

    }).then(function(){
        $scope.events = eventDetails;
    })

The second query, queryfalse, is not always executed. I am using promises and not sure if it is the right way to use them.

Answer 1

querytrue.find() -> returns a promise, and that promise eventually returns a list of results that you're interested in.

.then() sets up some action after a promise, and returns another promise immediately. You can also pass a success handler & error handler function

so, when you say

var p = querytrue.find().then(onSuccess, onError) 

p is a promise that will become the return value of the success or failure function, whichever one runs. You can chain another promise by adding another .then()

This chained promise gets the return value of the first promise.

If the first promise success function ran, the second chained success one will also run, likewise with error functions.

If your success handler creates another promise (like your question), you can return that promise from the success handler, and any subsequent chained promises will wait for that promise. Sort of adding a link to the chain.

var p = query1.find(); 
p.then( function(){
   ... // runs after query1.find()
   var q = query2.find().then(...);
   return q; 
})
.then( function() { 
   ... // runs after query1.find() and query2.find()
});

Answer 2

Just add return to pass the promise returned by querytrue.find().then() down the chain so the next then() won't execute until the promise is resolved. This also keeps your code flatter to avoid deeply nested promises.

    queryfalse.find().then(function(results){
        // code clipped for brevity
    }).then(function(){
        return querytrue.find().then(function(results1){
            // code clipped for brevity
        });
    }).then(function(){
        $scope.events = eventDetails;
    });

Here's a working plunker that demonstrates this: https://plnkr.co/edit/SwPIC1K6yEhEgpIlxoEo?p=preview

Answer 3

You have to move the angular result to the 2nd promise.

var innerQuery = new Parse.Query(Attendees);
    innerQuery.equalTo("user_id",$localStorage.username);
    innerQuery.equalTo("status","confirmed")
    innerQuery.equalTo("code_verified",false)

    var innerQuerytrue = new Parse.Query(Attendees);
    innerQuerytrue.equalTo("user_id",$localStorage.username);
    innerQuerytrue.equalTo("status","confirmed")
    innerQuerytrue.equalTo("code_verified",true)


    innerQuery.find({}) 
    innerQuerytrue.find({}) 


    var eventDetails = []

    var queryfalse = new Parse.Query(Events)
    queryfalse.matchesKeyInQuery("id_event","event_id",innerQuery);

    var querytrue = new Parse.Query(Events)
    querytrue.matchesKeyInQuery("id_event","event_id",innerQuerytrue);


    queryfalse.find().then(function(results){
        for (var i in results) {
              var object = results[i];
              var eventId = object.get("id_event");
              var eventname = object.get("event_name");
              var datestart = object.get("date_start");
              var location = object.get("location");
              var eventimagefile = object.get("event_image");
              var eventimageurl = eventimagefile.url();
              eventDetails.push({'name':eventname,'eventId':eventId, 'location':location, 'datestart':datestart, 'eventphoto':eventimageurl,'verified':false})      
        }

    }).then(function(){
        querytrue.find().then(function(results1){
            for (var i in results1) {
                  var object = results1[i];
                  var eventId = object.get("id_event");
                  var eventname = object.get("event_name");
                  var datestart = object.get("date_start");
                  var location = object.get("location");
                  var eventimagefile = object.get("event_image");
                  var eventimageurl = eventimagefile.url();
                  eventDetails.push({'name':eventname,'eventId':eventId, 'location':location, 'datestart':datestart, 'eventphoto':eventimageurl,'verified':true})      
            }
        }).then(function(){
            $scope.events = eventDetails;
        });
    })