AngularJS:使用谷歌电子表格服务中的数据在控制器内创建对象

时间:2016-07-22 21:24:48

标签: javascript angularjs angular-leaflet-directive

我正在建立一个带有传单地图的角度应用程序。我的目标是在控制器内创建一个包含地图所有标记的对象。我想从谷歌电子表格中检索标记的数据。

根据这个site,我认为标记对象应如下所示:

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
        }
}

我可以使用此工厂从电子表格中检索数据:

 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
      };
    }]);

更新:我可以解决问题。工作控制器应如下所示:

.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);
]);

Marker for the map: Array of objects

0 个答案:

没有答案