How to wait for 3 Facebook Async functions to complete before pushing to array?

Question

I have an array of facebook posts that I have each processed into a structured format, such as:

var refined_posts = [];
var refined_post = {
   info1: info1,
   info2: info2,
   username: username,
   profilelink: profilelink
}

info1 and info2 is returned from my first Async Facebook Graphs API call, which grabs a facebook post:

   // Get the facebook post
   FB.api(
        "/142679255268",
        function (response) {
          if (response && !response.error) {
            info1: response.info1,
            info2: response.info2,
            postid: response.id
          }
        }
    );

And after than I have 2 other Async calls for extracting the user name of a facebook post, and the profile link URL:

        // Get the name of the poster
        FB.api(
            '/'+postid+'?fields=from',
            function (response) {
              if (response && !response.error) {
                username = response.from.name;
              }
            }
        );

        // Get the profile link of the user
        FB.api(
            '/'+username+'?fields=link',
            function (response) {
              if (response && !response.error) {
                profilelink= response.link;
              }
            }
        );

And then finally, I push the refined_post to the array.

refined_posts.push(refined_post);

However, currently the refined_post will get pushed to the array before the last 2 async calls complete. How can I make the push wait for all Facebook async calls to finish before pushing?

I am using AngularJS but I would also like to be able to reuse my frontend code in my NodeJS backend. For now my priority is getting this to work on the frontend. Any ideas?

Either promises or callback functions will solve this. Obviously since you are using Angular you will use $q.defer(); — Kylie, Mar 25 '16 at 16:44
look into async https://github.com/caolan/async if you would like to use callbacks — user2950720, Mar 25 '16 at 16:45
async github.com/caolan/async looks good, I knew itd have to be callbacks or promises. I was hoping someone knew off the top of their head specifically which functions I should use? — Kangze Huang, Mar 25 '16 at 16:47
http://stackoverflow.com/questions/15604196/angularjs-where-to-use-promises this has some facebook examples in it I think — Kylie, Mar 25 '16 at 16:48
No need for external promise library when angular already has `$q` built in — charlietfl, Mar 25 '16 at 17:11

gmaniac · Answer 1 · 2016-03-28T17:06:38.570

Like mentioned in the comments by @user2950720 async would solve this easily, here is an example

async.waterfall([
    function(callback) {
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback) {
      // arg1 now equals 'one' and arg2 now equals 'two'
        callback(null, 'three');
    },
    function(arg1, callback) {
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    // result now equals 'done'
});

Here is the documentation on this

***************UPDATE***************

It would look something like this for you

var refined_posts = [];
var refined_post = {};

async.waterfall([
    function(callback) {
        // Get the facebook post
        FB.api(
            "/142679255268",
            function (response) {
                var err = null;
                if (response && !response.error) {
                    refined_post = {
                        info1: response.info1,
                        info2: response.info2,
                        postid: response.id
                    };
                } else {
                    err = response.error;
                }

                callback(err);
            }
        );
    },
    function(callback) {
        // Get the name of the poster
        FB.api(
            '/'+postid+'?fields=from',
            function (response) {
                var err = null;
                if (response && !response.error) {
                    refined_post.username = response.from.name;
                } else {
                    err = response.error;
                }

              callback(err);
            }
        );
    },
    function(arg1, callback) {
        // Get the profile link of the user
        FB.api(
            '/'+username+'?fields=link',
            function (response) {
                var err = null;
                if (response && !response.error) {
                    refined_post.profilelink= response.link;
                } else {
                    err = response.error;
                }

                callback(err);
            }
        );
    }
], function (err) {
    if (!err) {
        refined_posts.push(refined_post)
    } else {
        // do something with your error
    }
});

Would I be able to change the value of global variables outside the function? — Kangze Huang, Mar 25 '16 at 19:52
Yes you can access a global variable in the waterfall function — gmaniac, Mar 28 '16 at 16:46

How to wait for 3 Facebook Async functions to complete before pushing to array?

1 Answers1