How to resolve a promise for a vector map datasource in Angularjs

[ant...@maxwelllucas.com]

Right so I'm fairly new to angular and really enjoying the experience and I'm slowly but successfully running through a few gotchas that keep cropping up, however this one has be stumped.

I'm loading a version of the Jquery Vector map and everything is working a treat. I'm creating the empty object and populating it from my datasource in a format that the map can use to colour code but here is where the problem crops up.

When the map is instantiated, it gets the contents of the object 'ratingobj' however the resource hasn't populated the object by the time its rendered. I can see this in the console log as ratingobj is always empty.

I understand the concept that the resource is a promise and when the data is retrieved it will be populated however what I can't work out is how to get the resource to resolve the resource and get the data prior to the map being loaded!

Please help, any pointers would be great!

Thanks

Here is my resource query in my services:

 .factory('CountryData', ['$resource',
  function($resource){
    return $resource('http://mydatasource/datafeed', {}, {
      query: {
        method:'GET',
        isArray:false,

        }

    })

  }])

Here's the controller

.controller('jqvmapCtrl', ['$scope' ,'CountryData', 'greeting',
function($scope, CountryData, greeting) {

  var ratingobj = {};

  $scope.rating = CountryData.query(function (response){
      angular.forEach(response.record, function(value,key) {
        ratingobj[value.countryISO] = value.countryRating;
        });
    });

    console.log(ratingobj);

  $scope.worldMap = {
    map: 'world_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverOpacity: 0,
    hoverColor: '#C2C2C2',        
    selectedColor: '#666666',
    enableZoom: true,
    showTooltip: true,
    values: ratingobj,
    scaleColors: ['#C4FFFF', '#07C0BB'],
    normalizeFunction: 'polynomial',
  };

}
]);

This is my main app file with the route

  .when('/countries/map', {
    templateUrl: 'views/countries/map.html',
controller: 'jqvmapCtrl',

  })

[Charly Poly]

Hi,

Welcome to Angular JS :)

Many things are incorrect here, first in the controller.

$scope.rating = CountryData.query(function (response){
      angular.forEach(response.record, function(value,key) {
        ratingobj[value.countryISO] = value.countryRating;
      });
 });

 CountryData.query will return a object with a promise (and others things), not the data itself.

So $scope.rating will no wait the end of the request to be populated.

If you want $scope.rating to be a promise that will be fulfilled when data has been loaded, do the following :

$scope.rating = CountryData.query(function (response){
      angular.forEach(response.record, function(value,key) {
        ratingobj[value.countryISO] = value.countryRating;
      });

}).$promise;

Finally, for the map related issue, you have to find a way to delay the rendering of the map, or refresh it when $scope.rating if fulfilled.

Regards,

Charly.