使用 i18n 返回翻译内容的 JSON 数组

Question

Context: I am making a multi-language page using the react-i18next module of ReactJS.

Issue: I cannot access the arrayed JSON content.

The translated content being stored in separate JSON files for each language, non-array content works fine and gets correctly displayed and translated , however, I can't seem to use the arrayed content on my React components, let alone access its content through console.log() .

Below is an example of my translationEN.json file:

{
  "name": "Test",
  "occupations":["occupation1",
  "Part-time occupation2",
  "Language enthusiast"]
}

I am being able to refer to the non-array name using i18n.t("name") . However, attempting to access my arrayed occupations using i18n.t("occupations") results in the following console.log:

key 'occupations (en)' returned an object instead of string.

Using JSON.stringify() doesn't solve the issue, neither does console.log(i18n.t("occupations"), { returnObjects: true }) as suggested oni18next's documentation

Thanks in advance!

Answer 1

Problem solved. The array values can be accessed as such: i18n.t("occupations.0") for occupation 1 , i18n.t("occupations.1") for Part-time occupation 2 and i18n.t("occupations.2") for Language enthusiast . I just need to loop it out to make it look cleaner.