Using $localizedResource inside JS function

Shareer

I have a part of table like below.

<tr>
<td class='col-narrow'>{{$localizedResource.DATE}}</td>
<td class='col-narrow'>{{$localizedResource.TIME}}</td>
<td class='col-narrow'>{{$localizedResource.DAY}}</td>
</tr>
<tr>
<td class='col-narrow'>{{date}}</td>
<td class='col-narrow'>{{time}}</td>
<td class='col-narrow'>{{day}}</td> // need to translate this
</tr>

I need to translate the {{Day}} in different languages which i receive from api response. I have added the keys in the locales files for all the days and tried doing the below which unfortunately did not work

function translateKey(key){
    if(key){
    const message = key.toUpperCase();
    const newKey = this.$localizedresource.message;
    return newKey;
    }
}

and in the template i tried the following

 <td class='col-narrow'>{{ translateKey day}}</td>

can anyone help me with this

jan_blaha

$localizedresource[key.toUpperCase()] shouldn't you use this?

Shareer

@jan_blaha I updated the my function to return $localizedresource[key.toUpperCase()] like you mentioned

function translateKey(key){
    if(key){
    const message = $localizedresource[key.toUpperCase()];
    return message;
    }
}

HTML

<td class='col-narrow'>{{ translateKey day}}</td>

Unfortunately it still gives error

jan_blaha

You need to reach the $localizedresource from the root context

function translateKey(key, opts){
    if(key){
    const message = opts.data.root.$localizedresource[key.toUpperCase()];
    return message;
    }
}

Unfortunately it still gives error

It would be great if you always share the actual error detail.