Setting up a JSON Source
When you want to display an external data set in a PWA, you can use a JSON Repeater and select a JSON source.
This source can be a static JSON File, or a remote API Rest that return dynamic JSON data.
Populating a JSON Repeater from a static JSON File
Thorium Builder does not implement a JSON File editor, we consider here that you have a valid JSON file available. For our example, we use a JSON file with the following structure:
As you can see, the records are within a “records” array and contain 5 fields, including an image url.
This example file can be download here: Download JSON Exemple
NOTE
Since the 1.5.0 version, the Json API plugin can handle nested JSON structures, but if you are using an older version, the plugin wasn't handle JSON structures with more than one level, the record list had to be be placed at the root level (with a record root name or not) like in our example (items=>index, items=>name, etc…)
In order to use this JSON file with a JSON Repeater, follow the instructions below:
STEP #1 : create a page for your project and drop a JSON Repeater on the page:
STEP #2 : double click on the JSON API Repeater widget.
By double-clicking, you can access to the advanced properties. Select the “Local Json file” for "Source Type"
STEP #3 : Click on the “+” Button, then select the JSON File you wish to add to the project.
When the JSON file is loaded, set the “Root” records name in the “Root” input. For our exemple, the root name is “items”. For some JSON files, the structure may not have a root group, in that case let this field empty.
Click on the “Save” button, and the on the “Select” button in order to link this new Data Source to the JSON Repeater.STEP #4 : define the fields you want to display in the list as described in the screenshot below:
TIP
The Image Root fields lets you specify the root access to images if there are located on another server. For instance, The “image” field can contain only the filename, and the “Image Root” contains then the full prefix url when required (eg. https://myserver/mypath/)
