Print

Free: subloop vs. subloop-array

Here you learned about JSON’s basic structure and about the terms object and array. The sample JSON at http://doc.json-content-importer.com/wp-content/plugins/json-content-importer/json/gutenbergblockexample1.json presents both those data-types.

The challenge now is to display data with the free JCI Plugin. For that the template must use subloop for objects and subloop-array for arrays.


The basic template syntax is like this for an object:

{subloop:JSON-KEY_LOOP:NUMBER_OF_ITEMS}
     {JSON-KEY_LOOP.JSON-KEY_ITEM}
{/subloop:JSON-KEY_LOOP}

For an array it’s like this:

{subloop-array:JSON-KEY_LOOP:NUMBER_OF_ITEMS}
     {JSON-KEY_LOOP.JSON-KEY_ITEM}
{/subloop-array:JSON-KEY_LOOP}

Let’s illustrate this with our example JSON: basenode=level1 in the shortcode tells the Plugin to go to the element level1. The JSON key level2 is an array: each item of this array is either a key:value pair or an object.


The syntax for this is:

[jsoncontentimporter url=https://doc.json-content-importer.com/wp-content/plugins/json-content-importer/json/gutenbergblockexample1.json basenode=level1]
     TEMPLATE: {start}<br>
          {subloop-array:level2:-1}
               <strong>key: {level2.key}</strong><br>
               {subloop:level2.data:-1}
                    id: {level2.data.id}<br>
               {/subloop:level2.data}
          {/subloop-array:level2}
[/jsoncontentimporter]

See this in action:


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

key: This is the first value of key in the 'level1'-array

id: 11111


key: This is the second value of key in the 'level1'-array

id: 222


key: This is the third value of key in the 'level1'-array

id: 33333333


key: This is the fourth value of key in the 'level1'-array

id: 4444



Please note: the value of the basenode in the shortcode and the template are connected. You get almost the same result with basenode=level1.level2, but {start} is not accessible, as the plugin moves beyond it to the next deeper level of hierarchy:

[jsoncontentimporter url=https://doc.json-content-importer.com/wp-content/plugins/json-content-importer/json/gutenbergblockexample1.json basenode=level1.level2]
     <strong>key: {key}</strong><br>
     {subloop:data:-1}
          id: {data.id}<br>
     {/subloop:data}
[/jsoncontentimporter]

key: This is the first value of key in the 'level1'-array

id: 11111


key: This is the second value of key in the 'level1'-array

id: 222


key: This is the third value of key in the 'level1'-array

id: 33333333


key: This is the fourth value of key in the 'level1'-array

id: 4444


You may also use the shortcode without a basenode:

[jsoncontentimporter url=https://doc.json-content-importer.com/wp-content/plugins/json-content-importer/json/gutenbergblockexample1.json]
     {subloop:level1:-1}
          TEMPLATE: {level1.start}<br>
          {subloop-array:level1.level2:-1}
               <strong>key: {level1.level2.key}</strong><br>
               {subloop:level1.level2.data:-1}
                    id: {level1.level2.data.id}<br>
               {/subloop:level1.level2.data}
          {/subloop-array:level1.level2}
     {/subloop:level1}
[/jsoncontentimporter]


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

key: This is the first value of key in the 'level1'-array

id: 11111


key: This is the second value of key in the 'level1'-array

id: 222


key: This is the third value of key in the 'level1'-array

id: 33333333


key: This is the fourth value of key in the 'level1'-array

id: 4444



Was this article helpful?
5 out Of 5 Stars

1 rating

5 Stars 100%
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.
Previous Free: show the data {…}
On this page: