Skip to main content

Angularjs function calls order

I have a dropdown list of options, which are shown or not depending on conditions.

Here is my controller:

function FormOrderDialogController(tsModulesService, $scope, $q, $http, $uibModalInstance, params, $filter, Requester)                              

    Requester.restGet("/events/" + params.eventId, null, params.serverId).then((data)=>{
        vm.event = data;
    });

    Requester.restGet('/dic/10', null, null, null, true).then((resp) => {
        vm.templateTypes = resp;
        vm.templateType = vm.templateTypes[0].id;
    });    

     vm.isShowableTemplate = isShowableTemplate;

     function isShowableTemplate(templateType) {

        switch (templateType.id) {
            case 321:
                return !!vm.event.info.ticketTemplate;
            case 322:
                return !!vm.event.info.ticketETemplate;
        }
    }

By the time isShowableTemplate is called I expect event object to be filled, And the thing is the getEvent function is called twice, once before isShowableTemplate get called, and once after. The problem is event is undefined after the first call and I get an error "Cannot read property 'info' of undefined". My question is why is it so and what I am doing wrong. I am new to both js and angular, so may be I miss something essential.

Solved

Why not remove the function and filter:

function FormOrderDialogController(tsModulesService, $scope, $q, $http, $uibModalInstance, params, $filter, Requester)                              

    Requester.restGet("/events/" + params.eventId, null, params.serverId)
        .then(data => {
            vm.event = data;

            return Requester.restGet('/dic/10', null, null, null, true);
        })
        .then(resp => {
            vm.templateTypes = resp;
            vm.showableTemplateTypes = resp.filter(t => { 
                switch (t.id) {
                    case 321:
                        return !!vm.event.info.ticketTemplate;
                    case 322:
                        return !!vm.event.info.ticketTemplate;
                }

                return false; // or true depending if you want to show the     others.
            });

            vm.templateType = vm.templateTypes[0].id;
        });   
}

I've combined the two Promises together because you use the vm.event in the second response. By doing it this way, you can always guarantee some value for vm.event.

The html:

Comments

Post a Comment