return array from function javascript

Question

I need to return my behaviors but its not working

function getBehaviorList() {
    var behaviors = getBehaviors();
    console.log("Making behavior list");
    console.log(behaviors);
    $.each(behaviors, function (index, value) {
        if (value.indexOf("User/.lastUploadedChoregrapheBehavior") < 0) {
            $('#installedBehaviors tr:last').after('<tr><td>' + value.split('/').pop() + '</td><td><a href="#" class="btn btn-default" id="' + value + '"><span class="text-color-green glyphicon glyphicon-play-circle"></span> Start</a></td></tr>');
        }
    });
    $("#installedBehaviors a").click(function () {
        startBehavior(this);
    });
}
function getBehaviors() {
    console.log("Getting behaviors");
    session.service("ALBehaviorManager").done(function (behaviorManager) {
        behaviorManager.getUserBehaviorNames().done(function (behaviors) {
            behaviors;
            console.log(behaviors);
            return behaviors;
        });
    }).fail(function (error) {
        console.log("An error occurred: ", error);
    });
}

this is the error i get in the console

Getting behaviors

Making behavior list

undefined

Uncaught TypeError: Cannot read property 'length' of undefined

["User/.lastUploadedChoregrapheBehavior/test","User/actura-test/test", "User/check-update", "User/follow-me"]

dose anyone got an idea why?

Answer 1

You can't return a value from the middle of a callback inside your function. That is quite likely an asynchronous call (or two it appears).

You can use deferreds or promises to do this. Here is a simple example using a callback:

function getBehaviorList() {
    getBehaviors(function (behaviors) {
        console.log("Making behavior list");
        console.log(behaviors);
        $.each(behaviors, function (index, value) {
            if (value.indexOf("User/.lastUploadedChoregrapheBehavior") < 0) {
                $('#installedBehaviors tr: last ').after(' < tr > < td > ' + value.split(' / ').pop() + ' < /td><td><a href="#" class="btn btn-default" id="' + value + '"><span class="text-color-green glyphicon glyphicon-play-circle"></span > Start < /a></td > < /tr>');
            }
        });
        $("#installedBehaviors a").click(function () {
            startBehavior(this);
        });
    });
}

function getBehaviors(callback) {
    console.log("Getting behaviors");
    session.service("ALBehaviorManager").done(function (behaviorManager) {
        behaviorManager.getUserBehaviorNames().done(function (behaviors) {
            console.log(behaviors);
            callback(behaviors);
        });
    }).fail(function (error) {
        console.log("An error occurred: ", error);
        callback();  // Possibly callback with [] instead.
    });
}

Using deferreds is probably a better pattern, but takes more work and I would need to know more about the services you are calling.

Answer 2

You are call in upon getBehaviours() --> getting behaviors

Next you are making an async call (it does not have a direct answer timewise, but later.

You are returning to getBehaviorList without any returned values (undefined), which has no length.

Then later you receive the answer from getUserBehaviorNames and the console.log(behaviors).

You need to call a new function from .done()

function continueBuildBehaviorList(behaviors) {
    $.each(behaviors, function (index, value) {
        if (value.indexOf("User/.lastUploadedChoregrapheBehavior") < 0) {
            $('#installedBehaviors tr:last').after('<tr><td>' + value.split('/').pop() + '</td><td><a href="#" class="btn btn-default" id="' + value + '"><span class="text-color-green glyphicon glyphicon-play-circle"></span> Start</a></td></tr>');
        }
    });
    $("#installedBehaviors a").click(function () {
        startBehavior(this);
    });
}