Can someone help me with below problem, Here I wanted to pass the data from getJiraInfo(Service) to LineController(Controller).
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?
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;
});
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();
});
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,
}]
};
})
Try this :
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,
}]
};
})
});
