Passing Data from AngularJS Service to AngularJS Controller

Question

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 1

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

Answer 2

In your service you are not returning any value from the .then function, so calling the service function won't yield anything, you need to add something like

return $q.when([selectedCount, inProgressCount]);

it returns a resolved promise with your relevant data.

Then, you just need to call the promise and pass the data inside the .then body

controller:

getJiraInfo.getInfo().then(function(data) {
  // chartData will be setup when the response will arrive to your controller
  $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: data, 
      spanGaps: false,
    }]
  };
})

Answer 3

Try this :

1. Call Service method which is returning selectedCount and inProgessCount.

   app.controller('LineController', function($scope, getJiraInfo) {
    getJiraInfo.getInfo().then(function(response) {
    $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: [response.selectedCount , response.inProgressCount],//data passed here 
         spanGaps: false,
       }]
     };
   })
   

   });