Angularjs Controller return data undefined

Question

I'm trying to write down a Controller that pass a var to a Factory in Angularjs.. The following code return (in console) the values, but I'm not been able to load that into my html page.

Just to record, yes, I'm starting in angularjs.

app.js

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


myApp.factory('eventData', function ($http, $q) {
    delete $http.defaults.headers.common['X-Requested-With'];
    return {
        getEvent: function (id) {
            var deferred = $q.defer();

            $http({
                method: 'GET',
                url: 'page' + id
            }).
            success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).
            error(function (data, status, headers, config) {
                deferred.reject(status);
            });

            return deferred.promise;
        }
    };
});

myApp.controller('AngularJSCtrl',
    function FeederController($scope, eventData) {
        $scope.data = [];
        for (var i = 0; i < 10; i++) {
            eventData.getEvent(i).then(
                function (data) {
                    $scope.data = data;
                    console.log($scope.data);
                },
                function (statusCode) {
                    console.log(statusCode)
                });
        }
    }
);

page.html

<div ng-controller="AngularJSCtrl">
        <div ng-repeat="patient in patients">
            <businesscard>{{patient.name}}</businesscard>
        </div>
    </div>

first, $http is already a promise, you don't need to wrap it inside a deferred. secondly, your code loops through 10 events, queues each one of them up, and when the promise is resolved, each promise is replacing the $scope.data array with the single object of that promise. therefore, data is no longer an array and ng-repeat has nothing to iterate over. also, you should try to keep your examples consistent, and not use data in your JS and patients in your HTML. — Claies
– Claies, Commented Jan 3, 2016 at 1:02
if queuing up 10 promises and then populating the array promise by promise is really the logic you want to use, you probably should try $scope.data.push(data) instead, though I would say that iterating over 10 promises instead of fetching the data as a single unit from the server is fairly inefficient. also, you are mixing styles again, with the use of .then in one snippet and the use of the deprecated .success in the other. — Claies
– Claies, Commented Jan 3, 2016 at 1:04
Ok. I'll try clean up the code and make the adjustments you suggested. Thx :) — Fred. Dutra
– Fred. Dutra, Commented Jan 3, 2016 at 1:18

Fred. Dutra · Accepted Answer · 2016-01-03 13:45:47Z

Problem solved. I've searched for a while until get this right.

Thanks for @Claies and Brad Barrow for the tips :)

app.js

var myApp = angular.module('myApp',[]);
myApp.factory('patientsData', function ($http) {

    delete $http.defaults.headers.common['X-Requested-With'];

    return {
        getPatients: function () {
            return $http({
                url: 'http://localhost/ucamradio/php/tst.php?campusId=1',
                method: 'GET'
            })
        }
    }

});
myApp.controller('AngularJSCtrl', function($scope, patientsData){

    $scope.patients = [];

    var handleSuccess = function(data, status) {
        //$scope.patients = data;
        $scope.patients.push(data);
        console.log($scope.patients);
    };

    patientsData.getPatients().success(handleSuccess);

});

page.html

<div ng-controller="AngularJSCtrl">
        <div ng-repeat="patient in patients">
            <businesscard>{{patient.name}}</businesscard>
        </div>
        <!--   
        <div ng-repeat="patient in patients ">
            <businesscard>{{patient.id}}</businesscard>
        </div> -->
    </div>

Collectives™ on Stack Overflow

Angularjs Controller return data undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related