AngularJS : injecting data from factory to controller

Question

I trying to get some data and then pass it to the controller for further processing. I have setup a factory to get the data but having issues passing it to the controller and getting it working. Below is the case I'm working with.

 var app = angular.module("contactApp",[]);

    app.factory('listData',function($http){
     return{
        getData: function(onSuccess,onFailure,itemID){
            $http.get("/_api/web/lists/getbytitle('Consultant%20Profile')/items?$filter=ID%20eq%20"+itemID).success(onSuccess).error(onFailure);

        }

      };
    });

   app.controller('ContactController', function(listData,$scope){

        //setTimeout(function(){console.log(Data)},2000);

        console.log("Controller called. Hello");

        listData.getData(successFunction,failFunction,curItemId);

        successFunction = function(data){
            $scope.resData = data;
            console.log("Success - ", data);
        }

        failFunction - function(data){
            console.log("Didn't work - ", data);
        }

    });

This gives me below error.

successFunction is not defined

Not sure what I'm doing wrong, any input will be greatly appreciated!

EDIT:

Moving the functions down works really well but the async call is failing. I switched to using $ajax and it works just fine but $http doesn't work for some reason!

 app.factory('listData',function($http){
    return{
        getData: function(onSuccess,onFailure,itemID){
            //$http.get("/_api/web/lists/getbytitle('Consultant%20Profile')/items?$filter=ID%20eq%20156").success(onSuccess).error(onFailure);
            $.ajax({
                url:"/_api/web/lists/getbytitle('Consultant%20Profile')/items?$filter=ID%20eq%20"+itemID,
                headers: {"accept": "application/json; odata=verbose"},
                success: onSuccess,
                error: onFailure
            });

        }

    };
});

Just fyi the data is coming from a SharePoint list but that shouldn't matter. I'll keep digging and please do let me know if I'm making any syntax error that I can't locate.

I really appreciate the help guys!

EDIT 2:

Ok this issue was unrelated. I found the problem, SharePoint uses odata so I had to pass a header:

    app.factory('listData',function($http){
    return{
        getData: function(onSuccess,onFailure,itemID){
            $http(
                {
                    method: "GET",
                    headers: {"accept": "application/json; odata=verbose"},
                    url: "/_api/web/lists/getbytitle('Consultant%20Profile')/items?$filter=ID%20eq%20"+itemID
                }
            ).success(onSuccess).error(onFailure);

        }

    };
});

You guys ROCK!!!!!!!

Prepend `successFunction` and `failFunction` with `var`, then the javascript scope should pick it up. This will also prevent polluting your global `window` object — devqon, Mar 13 '15 at 15:47

Billy · Answer 1 · 2015-03-13T15:56:10.010

As Daniel A. White said, declare your functions before you call them.

var app = angular.module("contactApp",[]);

    app.factory('listData',function($http){
     return{
        getData: function(onSuccess,onFailure,itemID){
            $http.get("/_api/web/lists/getbytitle('Consultant%20Profile')/items?$filter=ID%20eq%20"+itemID).success(onSuccess).error(onFailure);

        }

      };
    });

   app.controller('ContactController', function(listData,$scope){

        //setTimeout(function(){console.log(Data)},2000);

        console.log("Controller called. Hello");

        var successFunction = function(data){
            $scope.resData = data;
            console.log("Success - ", data);
        }

        var failFunction - function(data){
            console.log("Didn't work - ", data);
        }

        //Now your functions are actually defined.
        listData.getData(successFunction,failFunction,curItemId);

    });

You don't have to use var to declare functions, because JavaScript will still understand but using var makes it a local variable, while not using var will define it as global.

I'm sure this will help.

Fantastic it's firing off now but something is wrong with the $http call I'm making. I'll update my question to include this. — habibg, Mar 13 '15 at 19:35

AngularJS : injecting data from factory to controller

1 Answers1