How to convert .properties file to json object in react

Question

I have an old project, uses something called phrase for translations.

Anyway, our translations files are *.properties and in react I could not find a way to handle them.

Usually I use i18next to handle tranlsation.json files in react

any idea what is the best for handle *.properties in react

an example about language.property file

header.shortcuts-screenreader=Listen
header.shortcuts-sign-in=Sign in
header.shortcuts-sign-out=Sign out
header.shortcuts-my-pages=My pages
header.shortcuts-new-to-the-library=New to the library?
header.shortcuts-join-the-library=Join the library
header.primary-navigation=Primary navigation

the output is something like this :

    {
  "sessionTimer": {
    "accessibleTimingOut": "{{timeoutMinutes}} minutes until this page times out. Move your mouse pointer or press any key to extend the time with {{extendMinutes}} minutes.",
    "reload": "Reload",
    "timedOut": "The page has timed out and needs to be reloaded.",
    "timingOut": "seconds until this page times out and needs to be reloaded. Move your mouse pointer or press any key to extend the time with {{extendMinutes}} minutes."
  },
  "header": {
    "screenReaderLabel": "Listen",
    "myAccountLabel": "Sign in",
    "myAccountLogoutLabel": "Sign out",
    "myAccountPagesLabel": "My pages",
    "newToTheLibrary": "New to the library?",
    "joinTheLibraryLabel": "Join the library",
    "openingsLabel": "Opening hours",
    "languageLabel": "Language"
  },
  "branchOpeningHours": {
    "headerLabel": "Opening hours",
    "closedLabel": "Closed",
    "todayLabel": "Today",
    "navigationBackLabel": "Back",
    "navigationNextLabel": "Next",
    "navigationPreviousLabel": "Previous",
    "serviceTypeClosedLabel": "Closed",
    "serviceTypeStaffedLabel": "Staffed",
    "serviceTypeSelfServiceLabel": "Self-service",
    "typeRegularLabel": "Regular",
    "typeSpecialLabel": "Special",
    "viewAllLabel": "Show all opening hours"
  }
}

can you give a sample content of .properties here? How key and value pairs are delimited. Also, did you check this - https://stackoverflow.com/questions/52041923/how-to-convert-config-properties-into-key-value-pairs — Aniket Chopade, Oct 08 '21 at 12:04
@AniketChopade I add an example thanks, I saw the post you referred, but I am searching for something more professional — Hani, Oct 08 '21 at 12:12

axtck · Answer 1 · 2021-10-08T14:02:55.867

You could do something like the following

const data = `header.shortcuts-screenreader=Listen
header.shortcuts-sign-in=Sign in
header.primary-navigation=Primary navigation
footer.primary-link=Navigation
footer.shortcuts-sign-out=Sign out`;

const rows = data.split("\n").map((r) => {
  return {
    parent: r.split(".")[0],
    child: r.split(".")[1].split("=")[0],
    value: r.split(".")[1].split("=")[1]
  }
});

const result = rows.reduce((acc, { parent, child, value }) => {
  // convert to child from x-x to camel case
  const camelChild = child.split("-").map((c, i) => {
    return i === 0 ? c : c.charAt(0).toUpperCase() + c.slice(1, c.length)
  }).join("");

  // if property doesn't exist yet on outcome object
  if (!acc[parent]) {
    // create new object & assign first value
    acc[parent] = { [camelChild]: value }
    return acc; // return early
  }
  
  // otherwise
  acc[parent][camelChild] = value; // assign value to property in object
  return acc;
}, {});

console.log(result);

How to convert .properties file to json object in react

1 Answers1