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

您必须将useLocalStorage和useDataAttrOptions设置为 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(){...}) .