Search code examples
javascriptjquerystring-interpolationi18next

Interpolation i18next

I need help with interpolation in i18n.

I'm doing everything as written in the documentation, but I still get an error.

i18next::interpolator: missed to pass in variable what for interpolating {{what}} some kind of sht.

My code:

<body>
  <span data-i18n="key" data-i18n-options='{ "what": "i18n"}'></span>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/8.1.0/i18next.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.0/jquery-i18next.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script>
  <script>
    i18next.use(window.i18nextHttpBackend).init({
        debug: true,
        // url.com?lang=en | url.com?lang=ru
        lng: new URL(window.location.href).searchParams.get('lang') || 'en',
        optionsAttr: 'i18n-options',
        useOptionsAttr: true,
        backend: {
          loadPath: './i18n/{{lng}}.json',
        },
      },
      function(err, t) {
        jqueryI18next.init(i18next, $);
        $('[data-i18n]').localize();
      },
    );
  </script>
</body>

en.json (as same as any other language for testing):

{
    "key": "{{what}} some kind of sht."
}

jquery.i18n doc: enter link description here | i18next doc: enter link description here

What's wrong?

Solution

  • I think you are mixing the jqueryI18next.init options with i18next.init options.

    optionsAttr and useOptionsAttr should probably be set in jqueryI18next.init.