Returning a JSON or any value from an anonymous function - AngularJS

Question

In the following code, am returning calling a server method "getUserNames()" that returns a JSON and assigning it to main.teamMembers variable. There is a viewAll button that is part of a report i am building which calls the method "$scope.viewAllTeamMembers = function($event)" listed below.
Now, the view all button lists all the value stored in main.teamMembers is not working on the first time the report is loaded. But when i navigate to other buttons in the report and try to access the viewAll its working.
The reason i asked about returning a JSON from an anonymous was because, i found that when its a global variable the viewAll button works the first time. Please help me understand with what i am missing.

angular.module('kamApp')
    .controller('MainCtrl', [
        '$q',
        '$rootScope',
        '$scope',
        '$timeout',
        'endpoints',
        'kamService',
        'queries',
        'translations',
        function($q, $rootScope, $scope, $timeout, endpoints, kamService, queries, translations) {

            var getUserNamesRequest = endpoints.getUserNames($rootScope.teamMemberIds).then(function(userDdata){
                return userDdata;
            });

            getUserNamesRequest.then(function(userDdata,$scope)  {

                $rootScope.userNameList = kamService.extractUserNameList(userDdata);

                main.teamMembers=kamService.concatTeamMemberName(
                    main.teamMembersData,
                    $rootScope.userNameList.list
                );

                main.teamMembers.list = kamService.sortList(main.teamMembers.list, 'role', 'name');  

            });
    }]);

--Directive

    angular.module('kamApp')
    .directive('teamMember', function() {

        return {
            templateUrl: 'views/team-member.html',
            replace: true,
            restrict: 'E',
            scope: {
                teamMembers: '=',
                viewSwitch: '=',
                changeReportTitle: '&'
            },
            link: function($scope) {

                $scope.itemLimit = 4;

                $scope.isOddLength = $scope.teamMembers.list.length % 2 !== 0;

                $scope.viewAllTeamMembers = function($event) {
                    $event.target.style.opacity = 0.6;
                    $scope.viewSwitch.dashboard = false;
                    $scope.viewSwitch.teamMember = true;
                    $scope.changeReportTitle()($scope.teamMembers.objectName.plural);
                };
            }
        };
    });

--HTML Code

 "<div class=\"expand-link inline-block-div\" ng-click=\"viewAllTeamMembers($event)\"> \n"+

Please do not update the question like this. Please rollback the edit and ask another question. — phuzi, Aug 17 '18 at 15:01

phuzi · Answer 1 · 2018-08-16T13:40:40.260

-1

In example 1, you're setting usernames to the promise returned by getUserNames().then() rather than the returned value and JSON.stringify(userNames); is run before the AJAX request completes.

In example 2, again, JSON.stringify(userNames); is being run before the AJAX request completes.

Instead you should put the code that is dependent on result inside the then callback.

var result={};

getUserNames($rootScope.teamMemberIds).then(function(userDdata){
    result = userDdata;
    // Code dependent on result
});

If you want to run other code that is dependent on the the variable being set that

var result={};

var getUserNamesRequest = getUserNames($rootScope.teamMemberIds).then(function(userData){
    result = userData;
    // Code dependent on result

    // return the data so that chained promises get the original data.
    return userData;
});

// Other code dependent on `result` being set.
getUserNamesRequest.then((userData) => {
    // use either `result` or `userData` here.
});

edited Aug 16 '18 at 13:40

answered Aug 16 '18 at 13:08

phuzi

12,078
3
26
50

Phuzi Thanks for your suggestion. I am able to perform the code that is dependent on the result, but in my case i want to use it outside the function i.e. i want to assign the result to a global variable. – aravind swamy Aug 16 '18 at 13:26
There's no problem doing that, you just need to make sure anything that accesses the variable waits until the AJAX response is completed. See updated answer. – phuzi Aug 16 '18 at 13:40
@phuki I have tried the above code and the same issue still exists. I want to store the result globally. Here in the below method, we can only use the result or userData inside the function. ` // Other code dependent on `result` being set. getUserNamesRequest.then((userData) => { // use either `result` or `userData` here. });` – aravind swamy Aug 17 '18 at 07:26
@aravindswamy The data is stored in the "global" variable. The problem you have is that _it's not available until __after__ the AJAX request is complete_, the only way to guarantee that it's available is to use the promise with `then()`. It may work with code outside a promise chain if you're lucky enough that it runs _after_ the ajax request completes – phuzi Aug 17 '18 at 07:50
@phuki Thanks for the info and you were right about it taking time to complete. I examined the network statistics and found the server method returning the JSON. I have updated the code which i am working on and hoping you could take a look. – aravind swamy Aug 17 '18 at 13:54
Please do not update the question like this. Please rollback the edit and ask another question. – phuzi Aug 17 '18 at 15:01

Returning a JSON or any value from an anonymous function - AngularJS

1 Answers1