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.
On Monday, 7 July 2014 13:33:40 UTC+2, [email protected] wrote:
>
> 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',
>
> })
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
