imsi imsi imsi imsi - 1 month ago 7
AngularJS Question

declare function inside another function in angularjs

i have my first function:

$scope.loadDataFromToMonth= function (from,to,year) {
// $scope.loadDataFromToMonthArrivee(from,to,2016);
var url = servername+'admin/dashboard/getIncidentDepartByMonthFromTo/'+from+'/'+to+'/'+year;
// alert(url);

function onSuccess(response) {
console.log("+++++getIncidentDepartByMonthFromTo SUCCESS++++++");
if (response.data.success != false) {
$scope.payloadgetIncidentDepartByMonthFromTo = response.data.data;
var getIncidentDepartByMonthFromTo= $scope.payloadgetIncidentDepartByMonthFromTo;
console.log(JSON.stringify(getIncidentDepartByMonthFromTo));
$scope.data = {}; // new object
$scope.data.datasets = []; // new array in data object ..
$scope.data.labels =[];
var theWholeOb={};
var dataSetObj = {}; //temp object to push into dataset array..
var dataSetObjtwo = {};
/////////////anomalies depart
dataSetObj.data = [];
dataSetObj.label= 'My First dataset';
dataSetObj.fillColor='rgba(220,220,220,0.2)';
dataSetObj.strokeColor= 'rgba(220,220,220,1)';
dataSetObj.pointColor= 'rgba(220,220,220,1)';
dataSetObj.pointStrokeColor= '#fff';
dataSetObj.pointHighlightFill= '#fff';
dataSetObj.pointHighlightStroke='rgba(220,220,220,1)';
getIncidentDepartByMonthFromTo.forEach(function(data) {
var monthNumber = $filter('date')(data.la_date, "MM");
var mun = data.number;
$scope.data.labels.push(monthNumber);
dataSetObj.data.push(mun);
});
$scope.data.datasets.push(dataSetObj);
}
else {
alert("failure");
}
};
function onError(response) {
console.log("-------getIncidentDepartByMonthFromTo FAILED-------");
//$scope.stopSpin('spinner-0');
console.log(response.data);
console.log("Inside getIncidentDepartByMonthFromTo error condition...");
};
//----MAKE AJAX REQUEST CALL to GET DATA----
ajaxServicess.getData(url,username,password, 'GET', '').then(onSuccess, onError);
};


this function return this result:

$scope.data = {
labels: ['Jan', 'Feb' 'Jul'],
datasets: [
{
label: 'My First dataset',
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'rgba(220,220,220,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: [75, 59, 80, 81, 56, 55]
}
]
};


it works good.

and i have the second function its return the same result but with different data of cours:

$scope.loadDataFromToMonthArrivee= function (from,to,year) {
var url =servername+'admin/dashboard/getIncidentArriveeByMonthFromTo/'+from+'/'+to+'/'+year;
//alert(url);
function onSuccess(response) {
console.log("+++++getIncidentArriveeByDate SUCCESS++++++");

if (response.data.success != false) {

$scope.payloadDayMonthYearData = response.data.data;

var loadedDataByDayMonthYear= $scope.payloadDayMonthYearData;
alert('xxx'+JSON.stringify(loadedDataByDayMonthYear));
$scope.data = {}; // new object
$scope.data.datasets = []; // new array in data object ..
$scope.data.labels =[];
var theWholeOb={};
var dataSetObj = {}; //temp object to push into dataset array..
var dataSetObjtwo = {};
/////////////anomalies arrivee
dataSetObjtwo.data = [];
$scope.date=[];
dataSetObjtwo.label='My Second dataset';
dataSetObjtwo.fillColor= 'rgba(151,187,205,0.2)';
dataSetObjtwo.strokeColor= 'rgba(151,187,205,1)';
dataSetObjtwo.pointColor= 'rgba(151,187,205,1)';
dataSetObjtwo.pointStrokeColor= '#fff';
dataSetObjtwo.pointHighlightFill='#fff';
dataSetObjtwo.pointHighlightStroke= 'rgba(151,187,205,1)';
loadedDataByDayMonthYear.forEach(function(data) {

var monthNumber = $filter('date')(data.la_date, "MM");
$scope.date.push(monthNumber);
var mun = data.number;
$scope.data.labels.push($scope.monthNumber);

dataSetObjtwo.data.push(mun);
});
$scope.data.datasets.push(dataSetObjtwo);

} else {
alert("failure");
}
// $scope.stopSpin('spinner-0');
};

function onError(response) {
console.log("-------getIncidentArriveeByDate FAILED-------");
//$scope.stopSpin('spinner-0');
console.log(response.data);
console.log("Inside getIncidentArriveeByDate error condition...");
};

//----MAKE AJAX REQUEST CALL to GET DATA----
ajaxServicess.getData(url,username,password, 'GET', '').then(onSuccess, onError);

};


this function return this result:

$scope.data = {
labels: [ 'Jan', 'Feb' 'Jul','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'My Second dataset',
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
data: [ 102, 123, 145, 60, 161]
}
]
};


it works good also, but my question is : how i can declare the second function inside the first function and combine the data returned and get the final result like this:

$scope.data = {
labels: [ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'My Second dataset',
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
data: [ 102, 123, 145, 60, 161]
},{
label: 'My First dataset',
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'rgba(220,220,220,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: [75, 59, 80, 81, 56, 55]
}
]
};

Answer

You can use the $q service included in angular, this allows you to create promises to trigger functions in order of each other.

In your first function you will need;

var deferred = $q.defer();
//stuff goes here
function onCompleteSuccess(){
     //logic goes here
     deferred.resolve(); //you can pass back variables too if need be.
}
function onFail(){
    return deferred.reject;
}

To use this you can ;

$scope.masterFunction = function(var1, var2, var3){
    $scope.loadDataFromMonth(var1, var2, var3).then(function(){ //can recieve a variable if you need to
         $scope.loadDataToMonthArivee(var1, var2, var3);
    }  
}

I also noticed that you instantiate your $scope variables twice, doing this means that you will overwrite your previously defined $scope variables, to overcome this use "var [object]" to create a private object, which then you would push to your main.

More information on $q here

Edit*

To merge your JSON objects, remove the following in your second function;

$scope.data = {}; // new object
$scope.data.datasets = []; // new array in data object ..
$scope.data.labels =[];

Then to merge JSON objects, just push your newly made object to the currently created one;

$scope.data1.datasets.push($scope.data2.datasets[0]);