How to check if the returned value of translate.instant is translated once

Question

Using ngx-translate, I have wrote this function, and what I am trying to do is

interface IWidgetFilterValue = { label: string; value: string; }

getSortedOptions(filterOptionsArr: IWidgetFilterValue[]): IWidgetFilterValue[] {
    const filterOptionsArrNew = [...filterOptionsArr];
    return filterOptionsArrNew.sort((a: IWidgetFilterValue, b: IWidgetFilterValue): number => {
      this.translateService
      const aTranslated =
        (a && a.key && this.translateService.instant(a.key)) || (a && a.value) || '';
      const bTranslated =
        (b && b.key && this.translateService.instant(b.key)) || (b && b.value) || '';

      return aTranslated.localeCompare(bTranslated);
    });
  }

and now what I am expecting is, if the a.key or b.key do not get the proper translated text then I want to return the a.value or b.value, and here is the problem this.translateService.instant method will return translated text if it is available or it will return the identifier/key value ,

which mean I will never get the a.value/b.value according to the fucntion above

var a = {"label":"Approved in english","key":"30349a66-1f39-412e-a841-052890516b2a","value":"Approved in english"}

this.translateService.instant(a.key);
"Approved in english"    //CORRECT

a.key; // "30349a66-1f39-412e-a841-052890516b2a"
a.key = a.key+'11111111111';  // NOW changed the key, such that I should not get the translation
"30349a66-1f39-412e-a841-052890516b2a11111111111"

this.translateService.instant(a.key);
"30349a66-1f39-412e-a841-052890516b2a11111111111" // So translateService.instant will return some value when the key passed to it is a truthy

BUt what I wanted is, if I do not a translated text for the key passed, I want to return a.value/b.value

I can think of a solution like if the return value of this.translateService.instant(a.key) is of particular regexp pattern and is of this format, then it means I have not got a translated text, then I can consider for a.value/b.value

like

private isTranslatedTextFound(a) { 
  const trans = this.translateService.instant(a.key);
// reg_exp look like for this pattern [a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}
  if(//check trans against regexp){ 

      return a.value
  }else{
     return trans;
 }
  
}

getSortedOptions(filterOptionsArr: IWidgetFilterValue[]): IWidgetFilterValue[] {
    const filterOptionsArrNew = [...filterOptionsArr];
    return filterOptionsArrNew.sort((a: IWidgetFilterValue, b: IWidgetFilterValue): number => {
      this.translateService
      const aTranslated =
        (a && a.key && a.value && this.isTranslatedTextFound(a) || '';
      const bTranslated =
        (b && b.key && b.value && this.isTranslatedTextFound(b) || '';
      return aTranslated.localeCompare(bTranslated);
    });
  }

Is there a other proper ways to address this issue

Answer 1

I think the solution is hidden in your question.

here is the problem this.translateService.instant method will return translated text if it is available or it will return the identifier/key value

You can just compare what you get from translateService with your key and if it is the same, you can just return a.value.

private isTranslatedTextFound(a) { 
  const trans = this.translateService.instant(a.key);
  return trans === a.key ? a.value : trans;
}