Question

I am slowly learning how to use callbacks and I am running into trouble. I think the code below should work byt it is not.

From what I can tell it is not descending in to the recursive function as when it hit another ‘tree’ entry or outputting anything at the end.

One of the issues I ran into is the callback in the for loop. I was not sure that there is a better way to do it: I just used a counter to see if I was at the end of the loop before calling the callback.

Some guidance would be really appreciated.

(function () {
    'use strict';

    var objectsList = [];

    function makeAJAXCall(hash, cb) {
        $.ajaxSetup({
            accept: 'application/vnd.github.raw',
            dataType: 'jsonp'
        });

        $.ajax({
            url: hash,
            success: function (json) {

                if (cb) {
                    cb(json);
                }
            },
            error: function (error) {
                console.error(error);
                throw error;
            }
        });
    }

    function parseBlob(hash, cb) {
        makeAJAXCall(hash, function (returnedJSON) {  // no loop as only one entry
            if (cb) {
                cb(returnedJSON.data);
            }
        });
    }

    function complete(cb, loopLength, treeContents) {
        concole.info(loopLength);
        if (cb && loopLength === 0) {
            objectsList.push(treeContents);
            cb();
        }
    }

    function parseTree(hash, treeName, cb) {
        var treeContents = {'tree': treeName, 'blobs': []}, loopLength, i, entry;
        var tree = 'https://api.github.com/repos/myusername/SVG-Shapes/git/trees/' + hash;
        makeAJAXCall(tree, function (returnedJSON) {
            loopLength = returnedJSON.data.tree.length;
            for (i = 0;  i < returnedJSON.data.tree.length; i += 1) {
                entry = returnedJSON.data.tree[i];
                if (entry.type === 'blob') {
                    if (entry.path.slice(-4) === '.svg') {     // we only want the svg images not the ignore file and README etc
                        parseBlob(entry.url, function (json) {
                            treeContents.blobs.push(json.content);
                            loopLength -= 1;
                            complete(hash, loopLength, cb);
                        });
                    }
                } else if (entry.type === 'tree') {
                    parseTree(entry.sha, entry.path, function () {console.info(objectsList);});
                }
            }
        });
    }

    $(document).ready(function () {
        parseTree('master', 'master', function () {     // master to start at the top and work our way down
            console.info(objectsList);
        });
    });
}());

Answer 1

Your recursion will not work properly because the variable where you are collecting blob data treeContents is a local variable of the recursive function so it’s created new and destroyed on every call to parseTree(). It will not be accumulating data. You must create this variable outside the scope of the parseTree() function so a single instance of this variable can live from one call to the next and you can correctly accumulate data in it.

There are several ways to fix this:

1. You can pass the current state of treeContents into the parseTree() function
2. You can make the recursive part of the function be a local function that shares a common treeContents variable.
3. You can make the treeContents variable be a global variable.

The second is my choice here something like this:

function parseTree(topHash, topTreeName, topCb) {
    var treeContents = {'tree': toptreeName, 'blobs': []};

    function parse(hash, treeName, cb) {
        var loopLength, i, entry;
        var tree = 'https://api.github.com/repos/myusername/SVG-Shapes/git/trees/' + hash;
        makeAJAXCall(tree, function (returnedJSON) {
            loopLength = returnedJSON.data.tree.length;
            for (i = 0;  i < returnedJSON.data.tree.length; i += 1) {
                entry = returnedJSON.data.tree[i];
                if (entry.type === 'blob') {
                    if (entry.path.slice(-4) === '.svg') {     // we only want the svg images not the ignore file and README etc
                        parseBlob(entry.url, function (json) {
                            treeContents.blobs.push(json.content);
                            loopLength -= 1;
                            complete(hash, loopLength, cb);
                        });
                    }
                } else if (entry.type === 'tree') {
                    parse(entry.sha, entry.path, function () {console.info(objectsList);});
                }
            }
        });
    }

    parse(topHash, topTreeName, topCb);
}

Assuming the ajax call is asynchronous, you will still need to find a way to know when you’re done with all the parsing and call some function that you pass the treeContents data to because otherwise, that data is not available to any other function. It can’t be simply returned from parseTree because of the asynch nature of the ajax calls.