JSON, object, array…

If you have a list of locations and their properties, you can put this information into a unstructured text paragraph: “Location A is at 5 Main Street, located in New York City. The next location is also in NYC, but in Lower Manhattan.”

While people can read and understand this, machines can’t. (Not without using artificial intelligence!) Machines and software generally still need structured data. Each piece of information must be clearly defined.

Programmers use simple text files but with structured text in them.

Such files have the filename extension XML, JSON, or CSV, and their structure allows software to read them.

The free JSON Content Importer understands JSON, whereas the PRO JCI Plugin understands JSON, XML, and CSV.

JSON: What does it look like?

At you can see a simple JSON file example. Let’s have a closer look:

  "level1": {
       "start": "Very good, this is the value of 'start', right out of the JSON-data",
       "level2": [
            "key" : "This is the first value of key in the 'level1'-array",
            "data": {
              "id": 11111,
              "type": "aaaa"
            "key" : "This is the second value of key in the 'level1'-array",
            "data": {
              "id": 222,
              "type": "bbbb"
            "key" : "This is the third value of key in the 'level1'-array",
            "data": {
               "id": 33333333,
               "type": "aaaa"
            "key" : "This is the fourth value of key in the 'level1'-array",
            "data": {
               "id": 4444,
               "type": "aaaa"
JSON formatting

The code block above displays the structure of the JSON file. The file should look the same if you open it in a browser window. The lines are indented only to make it easier for humans to read: software ignores the tabs / spaces and only reads the data.
If you have unreadable / minified JSON, you can use the browser or sites like to display JSON in a human- readable way.

The Free JCI Plugin requires the basenode

Both plugins read the JSON and work with it, transforming it to whatever you need, or sending it somewhere etc.
The PRO JCI Plugin uses the twig parser, which is very powerful and can handle the JSON by itself. The free JCI Plugin uses its own JCI parser, which requires specific information like the basenode in the shortcode.
The following shortcode tells the plugin where to get the JSON (url=...) and where to start in the JSON:

[jsoncontentimporter url= basenode=level1]
TEMPLATE: {start}

The code basenode=level1 tells the plugin to begin looping with level1 in the JSON. The curly brackets around {start} tell the plugin to search for the JSON key named start and uses the JSON value for that key to replace {start}.
In action:

TEMPLATE: Very good, this is the value of 'start', right out of the JSON-data

JSON: Object, Array

level2 in the JSON file looks different: it starts with an [ and ends with an ].
A structured list like this [a,b,c,...] is called an array (see also here).
We call a structure like {"a": "b"} an object with a JSON key and a JSON value (more precisely: a JSON Object Literal), see also here).

A JSON structure is usually nested, including JSON keys and their values. Those values can be objects or arrays, which themselves can contain key-value pairs.

Free JCI Plugin: working with Objects and Arrays

With the PRO JCI Plugin and its twig parser you don’t have to handle the details of objects and arrays. You can focus on the data there.

The Free JCI Plugin requires different code for objects and arrays.

Read more on that here: subloop vs. subloop-array

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
On this page: