I am builidng an angular app with a leaflet map. My goal is to create an object with all the markers of the map inside a controller. I want to retrieve the data for the markers from a google spreadsheet.
According to this site I think the marker object should look like this:
var marker = {
bar1: {
message: variable from spreadsheet,
lat: variable from spreadsheet,
lng: variable from spreadsheet
},
bar2: {
message: variable from spreadsheet,
lat: variable from spreadsheet,
lng: variable from spreadsheet
}
}
I am able to retrieve the data from the spreadsheet with this factory:
angular.module('projekteApp')
.factory('clientLoaderService', [
'$q', '$http',
function($q, $http) {
var loadClientList = function() {
console.log('loading..');
var deferred = $q.defer();
var sheet = 'od6';
var key = '1ymI_YXjTl1qkOzCTHWTMlwI6T3kc4ix3hhdq9Cfw_Yo';
var url = 'http://spreadsheets.google.com/feeds/list/' + key + '/' + sheet + '/public/values?alt=json-in-script';
$http.jsonp(url + '&callback=JSON_CALLBACK')
.success(function(data) {
console.log('!!', data);
var results = [];
var feed = data.feed;
var entries = feed.entry || [];
for (var i = 0; i < entries.length; i++) {
var value = entries[i];
results.push(value);
}
deferred.resolve(results);
})
.error(function(reason) {
deferred.reject(reason);
});
return deferred.promise;
};
return {
loadClientList: loadClientList
};
}]);
Update: I could solve the problem. The working controller should look like this:
.controller('DisplayCtrl', ['$scope', 'clientLoaderService',
function($scope, clientLoaderService) {
$scope.markers = [];
$scope.httpStatus = 0;
$scope.LoadRequest = clientLoaderService.loadClientList();
clientLoaderService.loadClientList()
.then(function (results) {
console.log(results);
for (var i = 0; i < results.length; i++){
$scope.markers.push({
lat: parseFloat(results[i].gsx$lat.$t),
lng: parseFloat(results[i].gsx$long.$t)
});
}
console.log($scope.markers);
]);