JSON, object, array…

Consider a list of locations and their properties presented as an 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.”

Humans can read and understand this effortlessly, but machines struggle. Without the use of artificial intelligence, machines can’t process this information. In machine and software contexts, you must clearly define each piece of information as they generally need structured data.

Programmers use simple text files with structured text in them.

Such files have the filename extension XML, JSON, or CSV, and their structure allows the 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 to make reading easier for humans: software ignores the tabs/spaces and only reads the data.
If you have unreadable / minified JSON, you can use a 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, 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 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} say to 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), also here).

A JSON structure is usually nested, including JSON keys and their values. Those values can be objects or arrays that 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?
3.4 out Of 5 Stars

4 ratings

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