Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

These pages describe how to translate JSON files with the new version 2 of the JSON filterThis page is a tutorial for configuring monolingual JSON files.

Table of Contents

Access your filter configurations

Login a manager or administrator and click the Settings top navigation link. Then click JSON files to view all your existing configurations and add new ones.

...

Each filter configuration tells the system the JSON properties to translate, any texts to entirely exclude from translation (e.g. numbers only), whether content is raw text or HTML formatted, and many other parameters. The most important configuration section is in the top:

Choose version 2

This tutorial is for version 2. Therefore, make sure the configurations shows “Version 2” in the top right. If not, click the link just below to convert it.

Version 2 is substantially more powerful than version 1 and we strongly recommend using it.

...

Choose monolingual or multilingual

In a monolingual workflow, the JSON contains texts in the source language and the translated JSON will contain all the texts in a given target language. In a multilingual workflow, the translated JSON will contain both the source texts and all the translated texts in one single file.

...

Specify translatable content with JSON paths

Now it gets interesting (smile) And this section is what this tutorial really is about. We introduce “JSON path” which is the standard mechanism to select content in JSON files and, in our case, the content we want to translate. Often JSON files contain content to translate and other content that must not be translated. JSON paths will make this choice simple.

...

Prerequisites

This tutorial uses JSON configurations with:

  • Make sure to choose “Version 2” in the configuration screen.

  • Choose the monolingual option.

...

Useful links for understanding JSON paths are:

...

Example 1 - Translate all content

Let’s start with the simple example below. Our objective is to translate all the text content:

...

And we can even make it simpler with this configuration. We put * (putting nothing has the same effect) into the path field (which selects nodes at the root level) and then choose to translate all the children of those root nodes.

...

In both cases we extract these texts:

...

Example 2 - Translate certain nodes only

In this example, we want to translate the “text”, “title” and “options” node but not all the other ones such as the “key”.

...

Our configuration now explicitly states the node names we want to translate:

...

Example 3 - Translate nodes in arrays

In this example, we have the translatable nodes in an array below “data”.

Code Block
{  
  "data": [
    {
      "id": 1002,
      "description": "Please review the conditions above.",
      "text": "The conditions need to be accepted."
      "fontSize": "11px",
      "action": "none",
    },  
    {
      "id": 1019,
      "description": "Thank you for submitting your request.",
      "text": "Your request is submitted."
      "fontSize": "11px",
      "action": "none",
    } 
}

Our configuration requires an array selector:

...

The [*] means that we want to select every element of the “data” array. Then we specify the nodes in each array object we want to translate.

Example 4 - Arrays and translate all properties

When your JSON is an array of objects, then leaving the JSON path empty will not extract all the properties of all the objects.

Example:

Code Block
[
    {
        "text": "Hello",
        "description": "Whatever"
    },
    {
        "text": "Good morning",
        "description": "Whatever again"
    }
]

To extract all the properties and texts, use this JSON path:

Code Block
$[*]

To extract just the “text” property, use:

Code Block
$[*].text

Example 5 - Extract meta-information with texts

Let’s look at a JSON file that contains product descriptions. With each product there is a title, a description, an identifier and some more meta-information.

...

You can also pull data and save to each segment’s custom fields like this:

...

Example

...

6 - Handling plain text and HTML content

JSON files may contain HTML formatted content. Our file contains “text” nodes that are not html and “html” nodes that are, well, HTML.

...

We achieve this by simply defining two JSON paths. One for our plain text nodes and one for our HTML formatted nodes:

...

Example

...

7 - Using advanced node selectors

Check out the file below. Each product has “status” field. We only want to translate if its value is “yes”!

...

It checks that the product object has a “translate” property with value “yes”: @.translate == 'yes' . The @ character means to

...

character represents the object in the array we look at.

...

Example 8 - Extract meta-data from any location in the file

We already discussed an example earlier on how to extract meta-information. These examples were simple in that the meta-information was on the same object level as the actual text to translate.

In the JSON below we want to translate the “text” properties and attach to it the meta-information “key” and “catalog”. The “key” is one object level above “text” and the “catalog” is at the root. How do we select those fields?

Code Block
{
	"products": [
	
		{
			"key": "1000",
			"product": { "text": "This is a product" }
		},
		{
			"key": "1000",
			"product": { "text": "This is a product" }
		}
	],
	
	
	"catalog": "Summer products"
}

The configuration is:

...

  • We use the ^ character to tell the system that the property named key is one level further up in the hierarchy relative to the translatable text.

  • We use the $ to start searching for catalog from the root of the document. Hence, $.catalog finds this property in the root.

To move two levels up in the hierarchy we would have typed ^^key.To simply find the first catalog property in the document whatever its level, we would have written $..catalog (two dots).

Info

The ^ character is not part of the JSON-path standard but is a feature we added for the JSON filters.

Final word

We only touched on some of the possibilities of the JSON filter. For more advanced files check out the JSON path links printed in the top.

With the advent of CHAT GPT and other LLMs, constructing JSON paths is made a bit easier. See the the following question and result:

Code Block
Given the JSON below: What is the JSON path to extract the "text" properties?

[
    {
        "text": "Hello",
        "description": "Whatever"
    },
    {
        "text": "Good morning",
        "description": "Whatever again"
    }
]

Answer from GTP 4o:

Code Block
The JSON path to extract all the "text" properties from the given JSON array is:

$[*].text

Here’s a breakdown of the JSON path:
$ refers to the root element of the JSON document.
[*] refers to all elements in the array at the root level.
.text refers to the "text" property of each element in the array.