CODEWITHSUNDEEP
angularjs
Rohit
Rohit

Reputation: 25

angularjs: unable to get data from factory

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;
            });
        }
    }]);

Upvotes: 0

Views: 205

Answers (3)

Avantika Saini
Avantika Saini

Reputation: 792

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();
}]);

Upvotes: 1

Dheerendra Jeevani
Dheerendra Jeevani

Reputation: 601

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.

Upvotes: 0

seekers01
seekers01

Reputation: 560

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);
        });
    }
}]);

Upvotes: 0

Related Questions