Error Cannot read property 'setTabletopOptions' of undefined

[heenaI]

Hi, I keep on getting this error Error Cannot read property 'setTabletopOptions' of undefined

Code; 'use strict';

angular.module('adf.widget.charts') .service('chartService', function(){ return { getUrl: function init(path, TabletopProvider) { TabletopProvider.setTabletopOptions( { key: path, simpleSheet: true } ) } } });

[aendra-rininsland]

@heenaI Is this all your code? You're missing a few key things if so.

1. Add Tabletop as a dependency in your angular.module call
2. You're trying to configure TabletopProvider in a service. You need to configure it in angular.config, which sets up configuration at runtime. TabletopProvider isn't available after that (i.e., in a service).
3. You need to inject the provider into .config. See https://docs.angularjs.org/guide/di.

Closing as not an issue; please let me know if you try all the above and are still having issues. Thanks!

[heenaI]

Thank you for your answer I am actually trying to make a widget with angular dashboard framework that reads googlespreadsheets. The problem is that I cannot get to data outside callback function here is my whole code

angular.module('adf.widget.charts', ['adf.provider', 'highcharts-ng'])
  .config(function(dashboardProvider){
    var widget = {
      templateUrl: '{widgetsPath}/charts/src/view.html',
      reload: true,
      resolve: {
        /* @ngInject */
        urls: function(chartService, config){
          if (config.path){
            return chartService.getSpreadsheet(config.path);
          }
        }
      },
      edit: {
        templateUrl: '{widgetsPath}/charts/src/edit.html'
      }
  };

  dashboardProvider
      .widget('piechart', angular.extend({
        title: 'Custom Piechart',
        description: 'Creates custom Piechart with Google Sheets',
        controller: 'piechartCtrl'
        }, widget));
  });

//controller and service 

angular.module('adf.widget.charts')
   .service('chartService', function ($q){
    return {
      getSpreadsheet: function init(path){
        var deferred = $q.defer();
        Tabletop.init({
          key: path,
          callback: function(data, Tabletop) {
            deferred.resolve([data, Tabletop]);
      },
          simpleSheet: true,
          debug: true
        });
      }
    }

  })

  .controller('piechartCtrl', function ($scope, urls) {
   $scope.urls = urls;

});

view.html

<div>
  <div class="alert alert-info" ng-if="!chartConfig">
    Please insert a repository path in the widget configuration
  </div>
  <div ng-if="chartConfig">
    <highchart id="chart1" config="chartConfig"></highchart>
    {{urls}}
  </div>
</div>

edit.html

<form role="form">
  <div class="form-group">
    <label for="path">Google Spreadsheet URL</label>
    <input type="text" class="form-control" id="path" ng-model="config.path" placeholder="Enter URL">
  </div>
</form>

[heenaI]

what I get in the console is just You passed a new Google Spreadsheets url as the key! Attempting to parse. tabletop.js:400 Initializing with key 1voPzG2Sha-BN34bTK2eTe-yPtaAW2JZ16lZ3kaDWxCs

[aendra-rininsland]

Oh! I see what you're doing! You're really close!

Simply have getSpreadsheet return deferred — that way you get a Promise in your resolve handler, right now everything resolves without anything being returned anywhere.

[heenaI]

Even if I return deferred I cannot get anything

'use strict';

angular.module('adf.widget.charts')
   .factory('chartService', function ($q, $rootScope){
    return {
      getSpreadsheet: function init(path){
        var deferred = $q.defer();
        Tabletop.init({
          key: path,
          callback: function(data, Tabletop) {
            deferred.resolve([data, Tabletop]);
      },
          simpleSheet: true,
          debug: true
        });

        return deferred.promise;
      }
    }

  })

  .controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService, urls) {
    $scope.getSheet = function() {
      chartService.getSpreadsheet(path).then(function(data) {
        console.log(data)
      })
    }

  }]);

[aendra-rininsland]

@heenaI This is honestly more of an issue with Tabletop or Angular than it is with angular-tabletop — you're not even loading the library. Might be worth asking somewhere like #angular on Freenode, you'd probably get a faster response than asking me here.

That said, do you call $scope.getSheet anywhere? I can't see anything wrong with what you're doing, you're using Tabletop pretty much identically to how I use it in angular-tabletop. That said, the console.log call will never run if $scope.getSheet() isn't called anywhere (e.g., in a template).