Stuck: AngularJs using factory with http call to json

Question

I am struck and not able to understand the issue here. I created a factory using http service call to my json file Factory (accountInfo.json):

appRoot.factory('accountInfo', ['$http', function($http) { 
  return $http.get('../../accountInfo.json') 
    .success(function(data) { 
      return data; 
    }) 
    .error(function(err) { 
      return err; 
    }); 
}]);

controller(AccountsController.js)

appRoot.controller('AccountsController', ['$scope', 'accountInfo', function($scope, accountInfo){

    accountInfo.success(function(data) {
      $scope.rows = data;
    });


    $scope.totals = {
        name: '',
        marketValue: 0,
        cash: 0,
        legend: 'none'
    };

    for (var i = 0; i < $scope.rows.length; i++) {
        $scope.totals.marketValue += $scope.rows[i].marketValue;
        $scope.totals.cash += $scope.rows[i].cash;
    }


    $scope.addAccount = function() {
        $scope.rows.push({
            name: 'New Account',
            marketValue: Math.random() * 100000,
            cash: Math.random() * 400000,
            legend: 'cyan'
        });
    }
}]);

My json (accountInfo.json)

[{
    "name": "Brokerage Account 3",
    "marketValue": 1999990,
    "cash": 1995826,
    "legend": "orange"
},
{
    "name": "Account 3",
    "marketValue": 1949990,
    "cash": 1695856,
    "legend": "darkorange"
},
{
    "name": "Brokerage Account 1",
    "marketValue": 1349990,
    "cash": 1595866,
    "legend": "red"
},
{
    "name": "Brokerage Account 4",
    "marketValue": 155990,
    "cash": 160826,
    "legend": "blue"
},
{
    "name": "Brokerage Account 2",
    "marketValue": 74560,
    "cash": 19956,
    "legend": "gray"
},
{
    "name": "Account 4",
    "marketValue": 55006,
    "cash": 53006,
    "legend": "salmon"
},
{
    "name": "Account 13",
    "marketValue": 37340,
    "cash": 0,
    "legend": "green"
},
{
    "name": "Joint Account 1",
    "marketValue": 28308,
    "cash": 4167,
    "legend": "darkblue"
},
{
    "name": "Joint Account 2",
    "marketValue": 10000,
    "cash": 10000,
    "legend": "teal"
}]

Error I am receiving is "$scope.rows is undefined" Controller is not able to access $scope.rows outside success function.

Thanks :)

so, what is the issue?

Ricardo Pontual
– Ricardo Pontual

2016-02-18 11:21:45 +00:00
Commented Feb 18, 2016 at 11:21 — Ricardo Pontual
– Ricardo Pontual, Commented Feb 18, 2016 at 11:21

iH8 · Accepted Answer · 2016-02-18 12:24:54Z

1

You need to resolve the promise in your controller, not in your factory, just return the promise:

appRoot.factory('account', ['$http', function($http) { 
    return {
        info: function () {
            return $http.get('../../accountInfo.json');
        }
    }
}]);

Then in your controller do:

appRoot.controller('AccountsController', ['$scope', 'account', function($scope, account){

    account.info()
        .success(function(data) { 
            $scope.rows = data;
        }) 
       .error(function(err) { 
            return err; 
        }); 

}]);

FYI, the success and error methods are deprecated:

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

See: https://docs.angularjs.org/api/ng/service/$http

Use the then method:

account.info().then(
    function resolved (response) {
        $scope.rows = response.data;
    },
    function rejected (response) {
        alert(response.status + ': ' + response.statusText);
    }
);

Here's a working example of the concept: http://plnkr.co/edit/UtJDpvBKKYl4rBzgXYo4?p=preview

edited Feb 18, 2016 at 12:24

answered Feb 18, 2016 at 11:19

iH8

28.8k4 gold badges72 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taani Over a year ago

Thank you,I did the same thing but still facing the issue. Error I am receiving is "$scope.rows is undefined" Controller is not able to access $scope.rows outside success function. . Inside the controller, success function i am able to access data object.

iH8 Over a year ago

I've changed the rejected method to throw an alert which you should see if the request is rejected and added a working example on Plunker to my answer. Hope that helps.

Taani Over a year ago

Thank you soo much.! I am pretty new here and trying to understand what is happening. I have added a refresh function also to my controller and is able to access my data in HTML view as well as refresh it. But I not able to access $scope.rows after the function inside the controller. and therefore not able to access length property. Plunker path: plnkr.co/edit/aB6ZJB5QXn5jqULfGTga?p=preview File accountController.js line no. 24. I am sure this is related to some core logic which I am missing.

Martijn Welker · Accepted Answer · 2016-02-18 11:18:38Z

0

You should return a function which fetches the data when you call it like so:

appRoot.factory('accountInfo', ['$http', function($http) { 
    return {
        fetchData: fetchData
    };

    function fetchData() {
        return $http.get('../../accountInfo.json');
    }
}]);

then in your controller you can do:

accountInfo.fetchData()
    .then(
        function(data) {
            console.log(data);
        },
        function(error) {
            console.log(error);
        }
    );

answered Feb 18, 2016 at 11:18

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

1 Comment

Taani Over a year ago

Thank you,I did the same thing but still facing the issue. Error I am receiving is "$scope.rows is undefined" Controller is not able to access $scope.rows outside success function. Inside the controller, success function i am able to access data object.

Taani · Accepted Answer · 2016-02-24 06:21:32Z

0

Thank you all for the help. I solved my issues by bootstraping the app. I was not able to access my data initially since the http call was not completed.

angular.element(document).ready(function() {
    angular.bootstrap(angular.element(document), ['app']);
});

answered Feb 24, 2016 at 6:21

Taani

431 silver badge10 bronze badges

Collectives™ on Stack Overflow

Stuck: AngularJs using factory with http call to json

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related