Batman Batman - 1 month ago 11
AngularJS Question

Passing Data from AngularJS Service to AngularJS Controller

Can someone help me with below problem, Here I wanted to pass the data from

getJiraInfo(Service)
to
LineController(Controller)
.

Plunker

In the
Line Controller
, currently, I have hard coded the values as

data: [65, 59]


But I wanted to pass these values from the getJiraInfo Service to data field dynamically as
data : [toDoCount,inProgressCount]


Can you please help me with this by referring Plunker?

Answer Source

As you know $http returns original Promise. In your example you resolved it in service and did nothing with results. Since we talk about async call, you can create new Promise by using $q and resolve it on controller side. The main point is to return deferred.promise; - object that contains resolve and reject callbacks.

Your service looks like factory a.e.:

return {
    getInfo: function() {/**/}
}

Change it to service syntax a.e:

 this.getInfo = function() {/**/};

or use factory a.e.

app.factory('getJiraInfo', function($http, $filter,$q) {/**/};

You already defined chart options so left only update the data:

getJiraInfo.getInfo().then(function(results) {
     $scope.chartData.datasets.data = results;
  });

FIXED DEMO

Full code:

var app = angular.module('myApp', ['tc.chartjs']);


app.service('JiraInfo', ['$http', '$filter','$q',function($http, $filter,$q) {

    this.getInfo = function() {

      var deferred = $q.defer();

       $http({
        method: 'GET',
        url: 'defect.json'

      }).then(function(response) {
        selectedCount = $filter('filter')(response.data.issues, function(
          inputs) {
          if (inputs.fields.status.name == 'To Do') return inputs;
        });

        inProgressCount = $filter('filter')(response.data.issues, function(
          inputs) {
          if (inputs.fields.status.name == 'IN PROGRESS') return inputs;
        });
     // console.log(inProgressCount.length,selectedCount.length);


        var data = {
          val:[inProgressCount.length,selectedCount.length]
        };

        deferred.resolve(data);  

      }, function (error) {
         deferred.reject(error); 
      });

       return deferred.promise;
    };
}]);


app.controller('LineController', function($scope, JiraInfo) {

  $scope.chartData = {
    labels: ["In Progress", "To Do"],
    datasets: [{
      label: "Weekly Report",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",

      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [0,0],
      spanGaps: false,
    }]
  };

  $scope.chartOptions = {
    responsive: true,
    maintainAspectRatio: false,

  };

  function run(){
    JiraInfo.getInfo().then(function(resp) {
    console.log(resp.val);
     $scope.chartData.datasets[0].data = resp.val;
  });
  }


  $scope.onChartClick = function(event) {
    console.log('LineController', 'onChartClick', event);
  }

  run();
});