Connecting Properties to JSON Data Source

Connect properties to data from a JSON file. You need two files in your project to do this:

data.jsonA data file.
JsonData.qmlA singleton that reads data from data.json.

To create these files, you need to create a new data model:

  1. In Model Editor, select .
  2. Select Create.

The files are created in the /imports/<projectName>/ folder of the project.

Connecting a Text Property to a Data Source

To connect a text property to a corresponding field in a JSON file:

  1. In the Navigator or 2D view, select a component that has a text property, for example, a text field.
  2. In the Connections view, go to the Bindings tab.
  3. Select .
  4. In the first From field, select DataStore, and in the second field, select the JSON entry you want to use. In this example, backend.name is selected. This corresponds to the name entry in data.json.
  5. In the To field, ensure that text is selected.

Now, the text field is populated with data from the JSON file.

Adding Data Fields to the JSON File

If you add data fields to the JSON file, you need to manually do the same updates to JsonData.qml.

  1. Go to the Projects view and open JsonData.qml.

  2. In the Properties view, create a new local custom property.

  3. Ensure that the name of the property matches the data entry in the JSON file.

Available under certain Qt licenses.
Find out more.