服务函数返回空对象

Question

I've got a factory function that won't return a variable I'm trying to set in my controller. I don't get an error though, just the variable won't get set to what it's suppose to.

spApp.factory('SiteService', function ($q){
    var rootUrl = window.location.protocol + "//" + window.location.hostname;
    var siteMap;

    //returns object containing info about all sites within collection
    var getSiteMap = function () {
        siteMap = {};

        var promise = $().SPServices({
            operation: "GetAllSubWebCollection",
            async: true
        });

        promise.then(
            function (response){
                map = {}; //init the map
                var web = $(response).find("Web").map(function () {
                    return $(this).attr('Url');
                });
                var webTitle = $(response).find("Web").map(function () {
                    return $(this).attr('Title');
                });  

                // create map
                for (var i = 0; i < web.length; i++) {
                    var item = web[i],
                        title = webTitle[i],
                        parts = item.split('/'),
                        domain = parts.splice(0, 3).join('/'),
                        current;

                    if (!map[domain]) map[domain] = {url:domain, title:title ,children:{}};
                    current = map[domain].children;

                    for (var index in parts) {
                        var part = parts[index];
                        if (!current[part]) {
                            current[part] = {url:domain+'/'+parts.slice(0,index+1).join('/'), title:title, children:{}};
                        }
                        current = current[part].children;
                    }
                }
            siteMap = map;
        }, function(reason){
            alert('FAILED:' + reason);
        })
        console.log(siteMap);
        return siteMap;
    }

    return{
        getSiteMap:getSiteMap
    }
});

Answer 1

The issue you have is that you are working with promises. When you put your console.log outside your then() function, you are logging the variable before it has actually been resolved.

If you put your console.log inside your then() function (after sitemap is assigned), it should show the correct value, but you still won't be able to access it reliably.

I think the simplest way for you to access the siteMap value after it has been populated with data is to pass in a callback function. Eg:

var getSiteMap = function (_callback) {
    siteMap = {};

    $().SPServices({
        operation: "GetAllSubWebCollection",
        async: true
    }).then(function(response){
        // Process the data and set siteMap
        // ...
        siteMap = map;

        // now pass siteMap to the callback
        _callback(siteMap);
    });

You would then use this in your controller like so:

SiteService.getSiteMap(function(sitemap){
    // Do something with your sitemap here
});

Now while this will work, it is just one quick example, and not necessarily the best way. If you don't like callbacks, you could create a second promise that resolves only when siteMap is assigned. Also depending on your use case for getSiteMap() , you may want to cache the value, otherwise the request will be called every time.

Answer 2

Try chaining your promises like this:

var getSiteMap = function () {
    siteMap = {};

    var promise = $().SPServices({
        operation: "GetAllSubWebCollection",
        async: true
    });

     return promise.then(function(response){ //return your promise
        // all you code
        siteMap = map;

        return siteMap; //return a value to another .then in the chain
    });
 }

Use it like this:

SiteService.getSiteMap().then(function(siteMap){

});