Backend loadPath problem about i18next-http-backend HOT 43 CLOSED

Can you provide a codesandbox example or similar?
How does the request to your loadPath look like?
Can you also show me more of the i18next debugging logs?

from i18next-http-backend.

Request loadpath response:

"{\"menu\":{\"show more products\":\"show more products\",\"all-model-of\":\"Tutti i modelli di\",\"most-wanted\":\"I pi\\u00f9 ricercati\",\"technologies\":\"Tecnologie\",\"products\":\"Prodotti\",\"related-links\":\"LINK CORRELATI\",\"was-this-content-useful\":\"Questo contenuto \\u00e8 stato utile?\",\"yes\":\"Si\",\"no\":\"No\",\"your-address\":\"IL TUO INDIRIZZO\",\"your-appliance\":\"IL TUO APPARECCHIO\"}}"

from i18next-http-backend.

ok, so probably, you are not serving json => content-type is not application/json ?

from i18next-http-backend.

ovviusly I have truncated the log

from i18next-http-backend.

content-type is not application/json ?

Do you mean that I have to set content type: application/json in the backend api ? before to send response ?

from i18next-http-backend.

I just tested with a stringified json and content-type test... this works...
so must be something else..
Can you create a reproducable example?

from i18next-http-backend.

ahhh wait... is menu your namespace?
Then you should not add this to the json file...

instead of: "{\"menu\":{\"show more products\":\"show more products\",\"all-model-of\":\"Tutti i modelli di\",\"most-wanted\":\"I pi\\u00f9 ricercati\",\"technologies\":\"Tecnologie\",\"products\":\"Prodotti\",\"related-links\":\"LINK CORRELATI\",\"was-this-content-useful\":\"Questo contenuto \\u00e8 stato utile?\",\"yes\":\"Si\",\"no\":\"No\",\"your-address\":\"IL TUO INDIRIZZO\",\"your-appliance\":\"IL TUO APPARECCHIO\"}}"

you should have this: "{\"show more products\":\"show more products\",\"all-model-of\":\"Tutti i modelli di\",\"most-wanted\":\"I pi\\u00f9 ricercati\",\"technologies\":\"Tecnologie\",\"products\":\"Prodotti\",\"related-links\":\"LINK CORRELATI\",\"was-this-content-useful\":\"Questo contenuto \\u00e8 stato utile?\",\"yes\":\"Si\",\"no\":\"No\",\"your-address\":\"IL TUO INDIRIZZO\",\"your-appliance\":\"IL TUO APPARECCHIO\"}"

from i18next-http-backend.

import i18n from 'i18next'
import XHR  from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next'
i18n.use(XHR)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath         : 'urlexample/{{lng}}/{{ns}}/',
            allowMultiLoading: false,
            crossDomain      : false
        },
          lng: 'it',
          ns: 'it',
          defaultNS: 'it',
          react: {
              useSuspense: false
          },
        fallbackLng: false,
        debug: true,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

And the json return like this:

{
"menu": {
    "all-model-of": "Tutti i modelli di ",
    "most-wanted": "I più ricercati ",
    "technologies": "Tecnologie"
   }
}

from i18next-http-backend.

The api take 2 parames for now:

language and country, because in a country it is possible that we have 2 language.
example:
italy:
it-it
en-it

from i18next-http-backend.

Another point:

if i change api for take all array of namespace.

have i need to change the use of translation ?

Now we use i 18next like this:

t('menu:all-model-of')

from i18next-http-backend.

And the json return like this:

{
"menu": {
    "all-model-of": "Tutti i modelli di ",
    "most-wanted": "I più ricercati ",
    "technologies": "Tecnologie"
   }
}

loadPath expects to return a the json of the namespace so the file should contain this:

{
     "all-model-of": "Tutti i modelli di ",
     "most-wanted": "I più ricercati ",
     "technologies": "Tecnologie"
}

from i18next-http-backend.

The api take 2 parames for now:

language and country, because in a country it is possible that we have 2 language.
example:
italy:
it-it
en-it

it-IT is a fully specified regional language code (lng+country) => italian in Italy
en-IT means english in Italy

from i18next-http-backend.

if i change api for take all array of namespace.

Do you mean multiloading?

from i18next-http-backend.

if i change api for take all array of namespace.

Do you mean multiloading?

I mean if i change api for take ns like this:

import i18n from 'i18next'
import XHR  from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next'
i18n.use(XHR)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath         : 'urlexample/{{lng}}/{{ns}}/',
            allowMultiLoading: false,
            crossDomain      : false
        },
          lng: 'it',
          ns: ['menu','search', ecc],
          defaultNS: false,
          react: {
              useSuspense: false
          },
        fallbackLng: false,
        debug: true,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

Can i keep using t like this:
t('menu:all-model-of')

from i18next-http-backend.

yes

from i18next-http-backend.

Ok thanks a lot. I try If i have other problem, i write under this post.

from i18next-http-backend.

So can this issue be closed for now?

from i18next-http-backend.

Yes thanks

from i18next-http-backend.

here again.
Another problem.

I fix the api and now take name space but now is second level problem.
Key:value problem

from i18next-http-backend.

How does the response look like?
And your current settings?

from i18next-http-backend.

Current settings:

i18n.use(XHR)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath         : 'url/{{lng}}/{{ns}}/',
            allowMultiLoading: false,
            crossDomain      : false
        },
        fallbackLng: false,
        debug: true,
        lng: 'it',
        ns: ['base', 'home', 'breadcrumb','menu', 'form', 'product','search','media','acc','blog','seo','product-finder'],
        defaultNS: false,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

Example partial response for menu:

"{\"show more products\":\"show more products\",\"all-model-of\":\"Tutti i modelli di\"}"

from i18next-http-backend.

seems to be missing a json.parse before inject response of api into namespace

from i18next-http-backend.

I have no idea how this can happen...
Can you try to make an example like here: https://github.com/i18next/i18next-http-backend/tree/master/example/node

from i18next-http-backend.

If this is the resonse of the request this should work: "{\"show more products\":\"show more products\",\"all-model-of\":\"Tutti i modelli di\"}"

Can you send a screenshot of the network call incl. headers etc..?

from i18next-http-backend.

If i remove json_encode before send response from backend api:

but miss key of translation

from i18next-http-backend.

Seems like you send strange data...
Can you please post the screenshot of the network call:
something like this:

and this:

from i18next-http-backend.

from i18next-http-backend.

from i18next-http-backend.

your content-type is application/json but you send a stringified json

from i18next-http-backend.

It's like you would json_encode 2x

from i18next-http-backend.

proof:

var ret = JSON.parse('"{\\"show more products\\":\\"show more products\\",\\"all-model-of\\":\\"Tutti i modelli di\\"}"')
console.log(ret) // still a string => {"show more products":"show more products","all-model-of":"Tutti i modelli di"}
if (typeof ret === 'string' && ret[0] === '{' && ret[ret.length - 1] === '}') {
  ret = JSON.parse(ret)
}
console.log(ret) // now it's an object
// {
//   'show more products': 'show more products',
//   'all-model-of': 'Tutti i modelli di'
// }

from i18next-http-backend.

could you fix it?

from i18next-http-backend.

Now this is the situation doesn't work.

I think the problem is that create a 0 cell after namespace...

And if i call api with this configuration:

i18n.use(XHR)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath         : 'url/{{lng}}/{{ns}}/',
            allowMultiLoading: false,
            crossDomain      : false
        },
        fallbackLng: false,
        debug: true,
        lng: 'it-it'
        ns: ['base', 'home', 'breadcrumb','menu', 'form', 'product','search','media','acc','blog','seo','product-finder'],
        defaultNS: false,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

Call api 2 time for namespace, first time as it-IT and second time with it. But i need only: it-it

from i18next-http-backend.

Please post again the screenshot of the http response

from i18next-http-backend.

I have solved for json. The problem is response from backend. Thanks for help.

But i have a question.

i18n.use(XHR)
    .use(initReactI18next)
    .init({
        backend: {
            loadPath         : url/{{lng}}/{{country}}/{{ns}}/',
            allowMultiLoading: false,
            crossDomain      : false
        },
        fallbackLng: false,
        debug: true,
       country: 'it',
       lng: 'it'
        ns: ['base', 'home', 'breadcrumb','menu', 'form', 'product','search','media','acc','blog','seo','product-finder'],
        defaultNS: false,
        react: {
            wait: true
        }
    }, (error, t) => {
        if(error)
            console.error(error);
    });

export default i18n

is there a way to use lng and country ? beacuse i have a specific translation for specific country.
Example:
en-it
is different from
en-gb

is there a way to achive this ?

thanks in advance.

from i18next-http-backend.

Now is all ok thanks a lot.

from i18next-http-backend.

there is no {{country}} path parser... but why not simply keep the language fully specified?
keep it: lng: 'it-it'

from i18next-http-backend.

https://www.i18next.com/principles/fallback#language-fallback

from i18next-http-backend.

there is no {{country}} path parser... but why not simply keep the language fully specified?
keep it: lng: 'it-it'

Because if i use it-it, backend i18next create it and it-IT and make call for it and it-IT. but i don't know why

from i18next-http-backend.

use lowerCaseLng: true

https://www.i18next.com/overview/configuration-options

from i18next-http-backend.

lowerCaseLng: true

Yes work thanks. But why is it call api with it-it first time and second time for it ?

from i18next-http-backend.

https://www.i18next.com/principles/fallback#language-fallback

from i18next-http-backend.

Ok thanks a lot

from i18next-http-backend.