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

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:

    ...
Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...