i18next Displayed key instead of value

Question

I have translation.json file in /locales/en/

{
    "app": {
        "name": "Example App"
    }
}

In html, I have:

<a href="/" data-i18n="app.name">

In js:

$(document).ready(function() {

    var language_complete = navigator.language.split("-");
    var language = (language_complete[0]);

    console.log('language', language);

    $.i18n.init({
        lng: language,
        fallbackLng: false,
        debug: false
    }, function() {
        $('a').i18n();
    });
});

It displayed app.name instead of Example App. What i missed in my code? Thanks

Answer 1

You have to set useLocalStorage and useDataAttrOptions to true

$.i18n.init({useLocalStorage: true , useDataAttrOptions:true, ....});

Answer 2

as of i18next V2, the backend is no longer provided out of the box (see the migration guide), so you're required to define a backend configuration in the init block:

backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
},

if you don't do that, your resources will not be loaded, and translation values will fallback to their respective keys (see the source code).

Answer 3

In js it's because $(document).ready doesn't wait for external contents to be loaded. You need to use $(window).on('load',function(){...}).