angularjs: unable to get data from factory

Question

I am unable to get my json data from factory and show it in table. When I was using the $scope object, it was working fine but then I saw in official website that they don't recommend using $scope anymore. So I am using this parameter as suggested in demo examples. And now my code is not working anymore.

Please see my code and help me in this regard:

HTML:

<body ng-app="admin">         
        <div ng-controller="controller1 as ctrl1">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>IP</th>
                                    <th>Time</th>
                                    <th>No. of times</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="iprow in ctrl1.ipLog">
                                    <td>{{iprow.ip}}</td>
                                    <td>{{iprow.time}}</td>
                                    <td>{{iprow.count}}
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script src="../framework/angular/angular.min.js"></script>
        <script src="javascript/app.js"></script>
        <script src="javascript/controllers/profileController.js"></script>
    </body>

angular app.js

var admin = angular.module('admin', ['myController']);

admin.factory('simpleFactory', function ($http) {
    var ipLog = [];

    var factory = {};

    factory.getIpLog = function () {
        // Simple GET request example:
        return $http({method: 'GET', url: 'mysql-query.php'}).
                then(function successCallback(response) {
                    ipLog = response.data;
                    return ipLog;
                }, function errorCallback(response) {
                    console.log(response.data);
                    return ipLog;
                });
    };
    return factory;
});

angular profileController.js

var myController = angular.module('myController', []);

myController.controller('controller1', ['simpleFactory', function (factory) {
        this.ipLog = [];
        init();
        function init() {
            var myDataPromise = factory.getIpLog();
            myDataPromise.then(function (result) {
                // this is only run after getData() resolves
                this.ipLog = result;
            });
        }
    }]);

Just return promise from the factory and inside your controller access result.data. Check my answer for code — Avantika Saini
– Avantika Saini, Commented May 26, 2016 at 10:57

Avantika Saini · Accepted Answer · 2016-05-26 11:18:26Z

1

Your view:

<body ng-app="admin">         
    <div ng-controller="controller1">
        ...
            <tr ng-repeat="iprow in ipLog">
        ...
</body>

factory code:

var admin = angular.module('admin', []);

admin.factory('simpleFactory', function ($http) {
var factory = {};

factory.getIpLog = function () {
    // Simple GET request example:
    return $http({method: 'GET', url: 'mysql-query.php'});
};
return factory;
});

Grab the factor module inside the controller. Controller:

var myController = angular.module('myController', ['admin']);

myController.controller('controller1', ['simpleFactory', function (factory) {
    $scope.ipLog = [];
    function init() {
        var myDataPromise = factory.getIpLog();
        myDataPromise.then(function (result) {
            $scope.ipLog = result.data;
        });
    }
    init();
}]);

edited May 26, 2016 at 11:18

answered May 26, 2016 at 10:55

Avantika Saini

7924 silver badges9 bronze badges

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

1 Comment

Rohit Over a year ago

sorry. but this is not working. I don't have any problem in factory because it was working before when I was using $scope object.

seekers01 · Accepted Answer · 2016-05-26 10:54:32Z

0

in app.js

factory.getIpLog = function () {
    // Simple GET request example:
    return $http({method: 'GET', url: 'mysql-query.php'});
};

in profileController.js

myController.controller('controller1', ['simpleFactory', function (factory) {
    this.ipLog = [];
    init();
    function init() {
        var myDataPromise = factory.getIpLog();
        myDataPromise.then(function (success) {
            this.ipLog = success;
        }, function(error){
            console.log(error);
        });
    }
}]);

answered May 26, 2016 at 10:54

seekers01

5601 gold badge4 silver badges11 bronze badges

Comments

Dheerendra Jeevani · Accepted Answer · 2016-05-26 11:15:05Z

In your profileController.js, this in this.ipLog=[] refers to myController but when when you are assigning value to this.ipLog=result, this here doesn't refer to myController. SO your this.ipLog is always an empty array.

try this code:

var myController = angular.module('myController', []);

myController.controller('controller1', ['simpleFactory', function (factory) {
        var fixedThis=this;
        fixedThis.ipLog = [];
        init();
        function init() {
            var myDataPromise = factory.getIpLog();
            myDataPromise.then(function (result) {
                // this is only run after getData() resolves
                fixedThis.ipLog = result;
            });
        }
    }]);

Please try this code and tell if it works.

Collectives™ on Stack Overflow

angularjs: unable to get data from factory

HTML:

angular app.js

angular profileController.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

angular app.js

angular profileController.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related