Assigning a value of a promise to an object method

Question

Consider this object i'm creating.

$scope.formules = {};
$scope.formules = {

    label: 'some label',
    getYear: function() {

        // getData() is a promise
        $scope.getData().then(function(){

            // Some code to get the right data

            return someData;

        }.catch(function () {
         $scope.error = 'bad error';

    }

}();
}

At this point, getYear is undefined, obvious because i have to do a second return.

$scope.formules = {};
$scope.formules = {

    label: 'some label',
    getYear: function() {

        // getData() is a promise
        $scope.getData().then(function(){

            // Some code to get the right data

            return someData;

        }.catch(function () {
         $scope.error = 'bad error';

    }

    return $scope.getData();  //Putting the second return here

}();

or a shorter way could be this:

$scope.formules = {

    label: 'some label',
    getYear: function() {

        // getData() is a promise
        return $scope.getData().then(function(){ // Or putting the second return here.

            // Some code to get the right data

            return someData;

        }.catch(function () {
         $scope.error = 'bad error';

    }


}();

again this is not the right way because the second return just returns the promise so my method getYear contains a promise now, not the right way to do this.

last try:

$scope.formules = {

    label: 'some label',
    getYear: function() {

        // getData() is a promise
        return $scope.getData().then(function(){ // return the $scope.getData()

            // Some code to get the right data

            return someData;

        }.catch(function () {
         $scope.error = 'bad error';

    }


}().then(function(data){ return data; });

Now i run out of luck and ideas, console.log($scope.formules) shows me again that getYear is a promise, and won't give me the value.

Note: If i do console.log(data) instead of return data; i do get the value that i would like to bind to the method.

What am i doing wrong here, what is the right way to bind the value? Stack & Google did not gave me any answer...

EDIT

Here is the actual code that i use inside the method:

getYear: function ()  {

    $scope.measure = value.formules_total_year;

    $scope.getCube().then(function(test){

        var totalRatioData = [];

        for (var i = 0; i < $scope.tempData.length; i++){

        totalRatioData.push($scope.tempData[i][1].qNum);

    }

    return totalRatioData;

})


}(),

$scope.tempData is an array of 5 arrays. [Array[2], Array[2], Array[2], Array[2], Array[2]] and in those 5 arrays you have 2 objects

0: Object
    qElemNumber: 0
    qNum: 2009
    qState: "O"
    qText: "2009"
    __proto__: Object
1: Object
    qElemNumber: 0
    qNum: 225632.21000000002
    qState: "L"
    qText: "225632,21"

What i want as you see in this edit is a new array of all the qNum's of the last object of the 5 arrays and assign this array to getYear.

Answer 1

it's a bit hard to understand what you finally want to achieve and why you're "bundle" all the $scope assignments in your getYear() function. It looks to me, like you're trying to return a async value (totalRatioData) synchronous. the point here is, that this is not possible with es5. es7 will provide a new method called "await" which would enable that.

if you want to use the value of getYear on your view, just pass the value of the promise to your view model ($scope variable).

 // init ctrl $scope.year = null; _initYears(); function _initYears() { $scope .getData() .then( function() { var totalRatioData = []; for (var i = 0; i < $scope.tempData.length; i++){ totalRatioData.push($scope.tempData[i][1].qNum); } // assign data to year $scope.year = totalRatioData; } ) ; } 

if you're using ui-router, I would suggest, to place your promise in the desired section of your state config to ensure it's resolved, before the state is activated.

hope that helps

Answer 2

You should not call for data inside your scope properties but in the controller.

function myController($scope, someService) {
    $scope.formules = { label : 'label' };
    someService.getData().then(function(data) {
      $scope.formules.year = getYear(data);
    });
}

Then bind to scope properties

<span ng-bind="formules.label"></span>
<span ng-bind="formules.year"></span>