AngularJS - create object array where label is $translated

Question

I have the following array:

vm.roles = ['ROLE1', 'ROLE2', 'ROLE3', 'ROLE4'];

and I need this form of array:

vm.translatedRoles = [{id:0, label:'Role1'}, {id:1, label:'Role2'}, ...]

Therefore I wrote this function to transfer from vm.roles to vm.translatedRoles. My Problem now is that translatedRoles stays empty, so there are no objects in it. Does anyone know why?

function translateRoles() {
        var translatedRoles = [];
        for(var i = 0; i < vm.roles.length; i++) {
            $translate(vm.roles[i]).then(function(text) {
                var role = {};
                role.id = i;
                role.label = text;
                translatedRoles.push(role);
            });
        }
        return translatedRoles;
    }

Answer 1

That can't work. $translate() returns a promise. The function passed to $translate is executed later, asynchronously, when the translations are available. So, the return statement happens before translatedRoles is populated by the function.

You need to return a promise of array, or hope that the translations are already available and use $translate.instant():

function translateRoles() {
    var translatedRoles = [];
    for (var i = 0; i < vm.roles.length; i++) {
        translatedRoles.push({
          id: i,
          label: $translate.instant(vm.roles[i]);
        });
    }
    return translatedRoles;
}