Question

I’m used to writing ruby where I get data, then I manipulate it, then I display it.

In javascript land, I’m getting some json, on success: manipulate and display.

I want to separate out my code to look like this

 $("#uiElement").click(function(){
    data = getData();
    upDateUi(data);
})

function getData(){
    var fishes;
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            return data;
            //I don't want to manipulate the ui in this code;
            //upDateUi(data)
        },
        error: function(req,error){
            console.log(error);
        }
    })
    return fishes;
}

Answer 1

You can separate the logic that updates the UI from the logic that retrieves the data from the server using a callback pattern:

$("#uiElement").click(function(){
        var upDateUi = function(data) {
            /* ... logic ... */
        };

        getData(upDateUi);
})

function getData(callback){
    $.ajax({
        url: '/api/fishes/'+q,
        dataType: 'json',
        success: function(data){
            callback(data);
        },
        error: function(req,error){
            console.log(error);
        }
    })
}

For more information on functions and scopes:

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope

For more information on how I defined the upDateUi function:

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope#Recursion