AngularJS service function to get data dynamically populated from URL

I'm trying to implement dynamic form using this example.

myApp.factory("CustomerService", ['$filter', function($filter){
 var service = {};
  var countrylist = [
        { "id": 1, "country": "USA" },
        { "id": 2, "country": "Canada" },
        { "id": 3, "country": "India" },
  ];
var statelist = [
    {"Id":1, "state":"Alaska", "countryId": 1},
    {"Id":2, "state":"California", "countryId": 1},
    ...
 ];
var citylist = [
    {"Id":1, "city":"Anchorage", "stateId": 1},
    ...
  ];
service.getCountry = function(){    
    return countrylist;
  };

service.getCountryState = function(countryId){
    var states = ($filter('filter')(statelist, {countryId: countryId}));
    return states;
  };


service.getStateCity = function(stateId){    

 var items = ($filter('filter')(citylist, {stateId: stateId}));      
  return items;
 };

 return service;

 }]);

What I want is to get statelist and countrylist populated from json http response I have url created /ajax_countries/ which return JSON formatted data on the same way as countrylist

   service.getCountry = function(){    
       return $http.get('/ajax_countries/').success(function(data) {
           return data;
       })
      }

Not working. Here is the codeopen link from example above.

Answers


You could consider in create a factory country, state and city so the logic for each will be separated.

Note: this is just a sketch you have to modify and implement the real.

this way you would have

angular.module('Services')
.factory('countryService', [
    '$http', function ($http) {
        var settings = {
            apiUrl: '/ajax_countries/',
        };
        return {
            getCountry: function(callback){    
                $http.get(settings.apiUrl).success(callback);
            }
        };
    }
]);

(...)

angular.module('Services')
.factory('stateService', [
    '$http', function ($http) {
        var settings = {
            apiUrl: '/ajax_states/',
        };
        return {
            getCountryState: function(countryId, callback){    
                $http.get(settings.apiUrl, {countryId: countryId}).success(callback);
            }
        };
    }
]);

(...)

angular.module('Services')
.factory('cityService', [
    '$http', function ($http) {
        var settings = {
            apiUrl: '/ajax_cities/',
        };
        return {
            getStateCity : function(stateId, callback){    
                $http.get(settings.apiUrl, {stateId: stateId}).success(callback);
            }
        };
    }
]);

So now, for example on your controller you can inject the services.

angular.module('myApp', ['Services'])
.controller('mainCtrl',['countryService','stateService','cityService',
function(countryService,stateService,cityService){

    countryService.getCountry(function(data){
        $scope.countryList = data;
    });

    stateService.getCountryState(countryId, function(data){
        $scope.states  = data;
    });

    cityService.getStateCity(stateId, function(data){
        $scope.items = data;
    });
}]);

You are doing it wrong. You have created a local variable service for storing the function. Instead you should store it in global scope.

See Codepen Here

myApp.factory("CustomerService", ['$filter', function($filter) {

  this.countrylist = [
            { "id": 1, "country": "USA" },
            { "id": 2, "country": "Canada" },
            { "id": 3, "country": "India" },
    ];

  this.statelist = [
    {"Id":1, "state":"Alaska", "countryId": 1},
    {"Id":2, "state":"California", "countryId": 1},
    {"Id":3, "state":"New York", "countryId": 1},
    {"Id":4, "state":"New Brunswick", "countryId": 2},
    {"Id":5, "state":"Manitoba", "countryId": 2},
    {"Id":6, "state":"Delhi", "countryId": 3},
    {"Id":7, "state":"Bombay", "countryId": 3},
    {"Id":8, "state":"Calcutta", "countryId": 3}
  ];

  this.citylist = [
    {"Id":1, "city":"Anchorage", "stateId": 1},
    {"Id":2, "city":"Fairbanks", "stateId": 1},
    {"Id":3, "city":"Lakes", "stateId": 1},
    {"Id":4, "city":"Palmer", "stateId": 1},
    {"Id":5, "city":"Adelanto", "stateId": 2},
    {"Id":6, "city":"Artesia", "stateId": 2},
    {"Id":7, "city":"Benicia", "stateId": 2},
    {"Id":8, "city":"Clovis", "stateId": 2},
    {"Id":9, "city":"Dublin", "stateId": 2},
    {"Id":10, "city":"Manhattan", "stateId": 3},
    {"Id":11, "city":"Bronx", "stateId": 3},
    {"Id":12, "city":"Brooklyn", "stateId": 3},
    {"Id":13, "city":"Queens", "stateId": 3},
    {"Id":14, "city":"Staten Island", "stateId": 3},
    {"Id":15, "city":"Bathurst", "stateId": 4},
    {"Id":16, "city":"Campbellton", "stateId": 4},
    {"Id":17, "city":"Dieppe", "stateId": 4},
    {"Id":18, "city":"Edmundston", "stateId": 4},
    {"Id":19, "city":"Fredericton", "stateId": 4},
    {"Id":20, "city":"Miramichi", "stateId": 4},
    {"Id":21, "city":"Moncton", "stateId": 4},
    {"Id":22, "city":"Brandon", "stateId": 5},
    {"Id":23, "city":"Dauphin", "stateId": 5},
    {"Id":24, "city":"Flin Flon", "stateId": 5},
    {"Id":25, "city":"Morden", "stateId": 5},
    {"Id":26, "city":"Portage la Prairie", "stateId": 5},
    {"Id":27, "city":"Selkirk", "stateId": 5},
    {"Id":28, "city":"Steinbach", "stateId": 5},
    {"Id":29, "city":"Thompson", "stateId": 5},
    {"Id":30, "city":"Winkler", "stateId": 5},
    {"Id":31, "city":"South Delhi", "stateId": 6},
    {"Id":32, "city":"North Delhi", "stateId": 6},
    {"Id":33, "city":"East Delhi", "stateId": 6},
    {"Id":34, "city":"West Delhi", "stateId": 6},
    {"Id":35, "city":"Old Delhi", "stateId": 6},
    {"Id":36, "city":"New Delhi", "stateId": 6},
    {"Id":37, "city":"Yamuna Paar", "stateId": 6},
    {"Id":38, "city":"Chembur", "stateId": 7},
    {"Id":39, "city":"Borivali West", "stateId": 7},
    {"Id":40, "city":"Ghatkopar West", "stateId": 7},
    {"Id":41, "city":"Juhu", "stateId": 7},
    {"Id":42, "city":"Mira Road", "stateId": 7},
    {"Id":43, "city":"Powai", "stateId": 7},
    {"Id":44, "city":"Virar West", "stateId": 7},
    {"Id":45, "city":"Rajarhat", "stateId": 8},
    {"Id":46, "city":"Park Street", "stateId": 8},
    {"Id":47, "city":"Golpark", "stateId": 8},
    {"Id":48, "city":"Chandan Nagar", "stateId": 8}
];

  this.getCountry = function() {
    return this.countrylist;
  };

  this.getCountryState = function(countryId) {
    var states = ($filter('filter')(this.statelist, {
      countryId: countryId
    }));
    return states;
  };

  this.getStateCity = function(stateId) {
    var items = ($filter('filter')(this.citylist, {
      stateId: stateId
    }));
    return items;
  };

  return this;
}]);

If your using $http which is asynchronous then service.getCountry is return undefined because to complete an asynchronous event is take some time and js not hold until that event to be complete instead it will execute the rest of the code.

In here probably you will get undefined when you use $scope.countries = CustomerService.getCountry(); reason is its return undefined because its not hold until ajax to be complete and then return the return data;

So what we can do is use the angular promises1, angular promises2 search if you not much familiar with it.

to do that

 service.getCountry = function(){    
   return $http.get('/ajax_countries/'); //this will return a js promise
 }

when you invoking the function do as below,

CustomerService.getCountry().then(function(data) {
    //success
   $scope.countries = data;
}, function() {
    // error
});

Need Your Help

Size problems with ImageView in android

java android xml

I have the following problem. When I get image from drawable folders I get the image with correct sizes and when I move the same picture to assets folder and retrieve it from there it appears to be...

'break' in an 'if' statement

python for-loop if-statement break

I am taking the Python course on Codeacademy.com. I am totally new to programming. We are designing a small version of the game 'Battleship' and everyone in the forums seems to be stuck on the same...