Question 253430 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Using nested json files in reactjs

I have a json file named ‘en.json’ in my reactjs project in order to use i18next translation:

"Ascending": "Ascending",
"Descending": "Descending",
"All": "All",
"job-types": {
        "remote": "remote",
        "temporary": "temporary",
        "fulltime": "fulltime",
        "parttime": "parttime"
     },  
 ...
   }

I want to insert the "job-types" items in another json files then refer to it in my current ‘en.json’ file. Is it possible? If yes, please how?

in i18n.js file i use:

  const resources = {
    en: {
      translation: translationEN
    },
    fa: {
      translation: translationFA
    },
    ar: {
      translation: translationAR
    }
  };
  
  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      resources,
      fallbackLng: 'en',
      debug: true,
      interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
      }
    });

 export default i18n;

translationEN , translationFA and translationAR are the imported .json files (to the i18n.js) for desired languages which are English, Farsi or Persian and Arabic.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In order to use the translation, I used two or more .json files for each language and concat them, without need nesting them in the following way:

    const resources = {
    en: {
      translation: { ...translationEN, ...translationEN1}
    },
    fa: {
      translation: { ...translationFA, ...translationFA1}
    },
    ar: {
      translation: { ...translationAR, ...translationAR1}
    }
  };
  
  i18n
    .use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
      resources,
      fallbackLng: 'en',
      debug: true,
      interpolation: {
        escapeValue: false, // not needed for react as it escapes by default
      }
    });

 export default i18n;

    The first json file:

    {
   "Ascending": "Ascending",
   "Descending": "Descending",
   "All": "All", 
   ...
 }

    and the other json file:

     {
    "job-types": {
        "remote": "remote",
        "temporary": "temporary",
        "fulltime": "fulltime",
        "parttime": "parttime"
    }
 }

  2. 0

    In order to refer to a key in a JSON file, you first need to use JSON.parse() so you could traverse the object.

    const myResponse = JSON.parse(response);
const jobTypes = myResponse['job-types'] // dashed keys must be accessed through an index

    If you need to reach the file, then link to it:

    const myResponse = await fetch('path/to/file.json');
const jsonBody = await myResponse.json();
otherObject.jobTypes = jsonBody['job-types'];

    JSON doesn’t support linking to other files, since it is just text. You can send the file’s location as a value, but that’s the farthest you can get.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search