Declare function inside another function in angula

Question

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.

I have this second function that returns different data:

$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 one 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 1

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]);