how to pass values from callback function from service to controllers

Question

How can I access values returned from service using controller. In my code service.js function showInfo() returns JSON objects. But I cannot access these objects outside this function. If I try to do console.log from controller.js

console.log(chartService.showInfo.new_data)

I get

error Cannot read property 'new_data' of undefined.

Same happens if I try to

console.log(chartService.showInfo)

I get undefined.

How can I access the JSON object new_data inside function showInfo from the controller?

Service.js

angular.module('myApp')
   .service('chartService', function (){
  return {
     getUrl: function init(path) {
        Tabletop.init( { key: path,
                         callback: showInfo,
                         simpleSheet: true } )
     }
  }

     function showInfo(data, tabletop){

          var new_data = JSON.stringify(data.map(function(el) {
            return {
                "name": el[Object.keys(el)[0]],
                "y": +el[Object.keys(el)[1]]
            };
     }));
   }
})

Controller.js

angular.module('myApp')    
      .controller('piechartCtrl', [ '$scope', 'chartService',  function (chartService, $scope) {
        console.log(chartService.showInfo.new_data)
    
    }]);

I dont see a return statement in `showInfo` function. That `return` is of map function. — Rajesh, Jan 14 '16 at 13:26
Take a look at this... http://stackoverflow.com/questions/34681319/how-to-setup-service-to-pass-google-sheet-ids-angularjs — Andy, Jan 14 '16 at 13:26

score 1 · Answer 1 · answered Jan 14 '16 at 13:29

Service

angular.module('myApp').service('chartService', function (){
    return {
        init: init,
        showInfo: showInfo
    };

    function init(path) {
        return Tabletop.init({
            key: path,
            callback: showInfo,
            simpleSheet: true 
        });
    }

    function showInfo(data, tabletop){
        return JSON.stringify(data.map(function(el) {
            return {
                "name": el[Object.keys(el)[0]],
                "y": +el[Object.keys(el)[1]]
            };
        }));
    }
});

Controller

angular.module('myApp').controller('piechartCtrl', [ '$scope', 'chartService',  function (chartService, $scope) {
    var tabletop = chartService.init(),
        chartInfo = chartService.showInfo(someData, tabletop);

    console.log(chartInfo);        
}]);

I don't know exactly what you wanted with the parameters in showInfo but this should get you a good way in the right direction.

I just want then to show as they are in showinfo basically get the output from show info inside controller — Imo, Jan 14 '16 at 13:33
@Imo well, if you read my code you'll probably understand how — Martijn Welker, Jan 14 '16 at 13:35
This creates a new problem I was getting the Paths throw getUrl function resolve: { /* @ngInject */ urls: function(chartService, config){ if (config.path){ return chartService.getUrls(config.path); } } }, and now I am unable to get the urls of spreadsheets — Imo, Jan 14 '16 at 13:52

score 1 · Answer 2 · answered Jan 14 '16 at 14:00

Best way is with Promise. In angular you have the q framework as $q service $q docs

Service

angular.module('myApp')
  .service('chartService', function($q) {
    var deferredSpreadsheet = $q.defer();
    return {
      getSpreadsheet: function init(path) {

        Tabletop.init({
          key: path,
          callback: showInfo,
          simpleSheet: true
        });
        return deferredSpreadsheet.promise;

      },

    }

    function showInfo(data, tabletop) {

      data = JSON.stringify(data.map(function(el) {
        return {
          "name": el[Object.keys(el)[0]],
          "y": el[Object.keys(el)[1]]
        };
      }));
      deferredSpreadsheet.resolve(data);

    }
  })

Controller

angular.module('myApp')
.controller('piechartCtrl', ['$scope', 'chartService', function($scope, chartService) {

    var path = "https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html";
    var pro = chartService.getSpreadsheet(path).then(function(data) {
      console.log(data)

    })


  }]);

Working example here

score -2 · Answer 3 · answered Jan 14 '16 at 13:32

-2

Dirty way: You can use Broadcast and Emit

in the Service:

$rootScope.$broadcast('myEvent', JSONSTUFF);

in the Controller:

$scope.$on("myEvent", function(e, json){
console.log(json);
});

answered Jan 14 '16 at 13:32

The Segfault

939
1
10
23

how to pass values from callback function from service to controllers

3 Answers3