Free: subloop vs. subloop-array

You learned about JSON’s basic structure and the terms object and array. The sample JSON at https://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:

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 more profound 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]

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]