Angularjs binding to Ajax return value

Question

I have an angularjs app with the following factory method that does live API call:

//Return SP json by SPID
    azureMobileClient.getSPjsonBySPID = function (callback, spid)
    {
        azureMobileClient.azureMSC.invokeApi("get_spjson_byspid", {
            parameters: {
                spid: spid
            },
            method: "get"
        }).done(function (results) {
            //console.log(results.result);

            callback(results.result);
        }, function (error) {
            alert(error.message);
        });
    }

And I have the following controller's method that consume it

$scope.getSPName = function (spid)
    {

        console.log("SPID:", spid);

        var returnedName;

        AzureMobileClient.getSPjsonBySPID(function (item)
        {
            console.log("item.fullname:", item.fullname);
            returnedName = item.fullname;


        }, spid);

        return returnedName;
    }

And this is how I am currently attempting to bind the returned item.fullname in my view (inside ng-repeat):

<p>
{{getSPName(t.parsedjsondata.SPId)}}
</p>

The problem is that the binding does not work although I do see the value of the console.log() with the correct item.fullname. I am guessing that this has to do with the delay of the API call and I need to insert $scope.$apply() somewhere but I am not sure what to do.

You really should try using promises on this ($q). Here is example code on how to use $q.defer(): medium.com/javascript-jquery-angular-firebase-and-mongodb/… — Daniel Falabella
– Daniel Falabella, Commented Jun 20, 2015 at 21:35

Beyers · Accepted Answer · 2015-06-20 21:59:50Z

There are some bad practices in your code. Some suggestions:

Use promises, i.e. $q in your factory methods.
Try not to use expensive functions in your expressions {{}}. They are evaluated often as part of Angular's dirty checking process.

One way to solve your problem is to change your Angular service function to return a promise:

azureMobileClient.getSPjsonBySPID = function (spid)
{
    var deferred = $q.defer();
    azureMobileClient.azureMSC.invokeApi("get_spjson_byspid", {
        parameters: {
            spid: spid
        },
        method: "get"
    }).done(function (results) {
        //console.log(results.result);
        deferred.resolve(results.result);
    }, function (error) {
        alert(error.message);
        deferred.reject(error);
    });
    return deferred.promise;
}

Then in your controller do something like:

$scope.spName = null;
azureMobileClient.getSPjsonBySPID(spid).then(function(item){
    $scope.spName = item.fullname;
}, function(error) {
    // Show error
});

vinayakj · Accepted Answer · 2015-06-20 21:46:32Z

0

Try this, lookslike you are binding wrongly {{}} use variable to resolve in value.

<p>
{{SPName}}
</p>

$scope.getSPName = function (spid)
    {

        console.log("SPID:", spid);

        var returnedName;

        return AzureMobileClient.getSPjsonBySPID(function (item)
        {
            console.log("item.fullname:", item.fullname);
            returnedName = item.fullname;
            return returnedName;
        }, spid);


    }
$scope.SPName = $scope.getSPName(t.parsedjsondata.SPId)

edited Jun 20, 2015 at 21:46

answered Jun 20, 2015 at 21:31

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

1 Comment

Eyad Over a year ago

Still does not work. I can see the value of item.fullname being retrieved in the console.log but it is not being binded to the view. I have am sure that is because the value is retrieved from a live server with some delay and I need to call $scope.$applay() somehow but I am not sure how to call it with a 'return' statement in my method

Collectives™ on Stack Overflow

Angularjs binding to Ajax return value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related