Fixing typos is boring. If I do it — I want it to be as fast as possible.

Alex Kondrashov

·

Follow

Published in

JavaScript in Plain English

·

3 min read

·

Dec 4, 2020

--

Listen

Share

I want to discuss a JSON format that could be helpful in reducing this problem.

Introduction

If you use Angular in your project you probably have used ngx-translate library to manage your translations. This library uses JSON files to translate strings for Angular components. English translation strings would be normally located inen.json. This is how it might look:

{
  "animal.bear.name": "Beer",
  "animal.bear.desc": "Bears are mammals that belong to the family Ursidae"
} 

To modify the text on the UI you need:

1. Take the key from the Angular component
2. Find it in en.json
3. Modify the value for a given key:

"animal.bear.name": "Beer" -> "animal.bear.name": "Bear"

⚠️ Important: Choose the format for en.json that will help search the right translation.

Available formats for en.json:

1. Standard JSON formatting
2. Namespaced JSON format

Standard JSON formatting

This is how en.json looks with Standard JSON formatting:

{
  "animal.bear.name": "Bear",
  "animal.bear.desc": "Bears are mammals that belong to the family Ursidae"
}

✅ Advantage

Whenever you need to modify the translation you could take animal.bear.name and search in your IDE or command line. Search results will take you straight to the right place:

Tip: alphabetical ordering could be helpful to improve navigation and structure in en.json:

{
  "animal.bear.name": "Bear",
  "animal.bear.description": "Bears are mammals that belong to the family Ursidae",
  ...
  "fish.salmon.name" : Salmon,
  ...
  "insect.fly.name": "Fly",
  "insect.mosquito.name": "Mosquito"
}

Namespaced JSON format

Let’s look at another formatting that can be used in the translation file en.json

{
  "animal": {
    "bear": {
       "name": "Bear",
       "description": "Bears are mammals that belong to the family Ursidae"
    }
  }
}

❌ Disadvantage

This format removes the ability to search by animal.bear.name :

To find a right place in en.json I would have to search by a substring, for example animal:

After that I would have to jump to the relevant section in en.json and continue the search manually.

✅ Advantage?

I spent some time thinking what advantage this could have over the other format. And as I struggled to find any. I’m going to ask you, is there any advantage of using Namespaced JSON format?

Conclusion

After spending some time with translation in Angular I prefer Standard JSON formatting in en.json. I’m curious to hear other experiences and advantages of using Namespaced JSON format in Angular translation.