JSON Reader

An overview of how to configure the JSON Reader event in Dittofi

The JSON reader event lets you build in functionality to import custom JSON files into your apps. You can set up the JSON reader event in five quick and easy steps.

  • Step 1. create a custom model

  • Step 2. create an JSON reader endpoint

  • Step 3. create a JSON reader action

  • Step 4. add the JSON reader event

  • Step 5. build and test your code

For the purpose of this example, we will be using the JSON below.


{
	"address_line_1": "fake",
	"address_line_2": "fake",
	"postcode": "fake"
}

NOTE

If you want to test importing this JSON, you need to save it in a file on your local machine. To do this, copy and paste the JSON above into a basic text editor like notepad or notepad++ and save the file with the .json extension.

Step 1. create a custom model

To use the JSON reader event, you first need to head over to the custom models tab. You can find the custom models tab under the wrench icon in the Dittofi Design Studio.

Create a custom model with the custom attributes set to the same names as the fields in our JSON file i.e. address_line_1, address_line_2 and postcode. See below.

TWO IMPORTANT THINGS TO NOTE:

  1. When creating the Custom Attributes set the type to Text. To configure your app to import different data types, you need to set different data types. For example, if you want to import numbers, you need to set the data type to Number.

  2. When you set the Custom Attributes, you need to choose between strict and nullable options. The nullable option allows you to import null values into the field. The strict option will force your system only accept the row of data if the field is not null.

Step 2. create a JSON reader endpoint

Go to the endpoint tab in the Dittofi Design Studio and create a new endpoint by clicking "+ New Endpoint". Set up the endpoint with the name "JSON Reader", the path "/v1/json_reader", the description "Read in my address book", the request method to "Post" and the req content type to "multipart/form-data". You can see an example of this below.

Next, you need to add a body variable to your endpoint. This will allow your endpoint to accept the JSON file that you're expecting to upload. You can set the name to "uploadfile" and set the type to "file", as below.

Save and close your endpoint.

Step 3. create a JSON reader action

Next up, head on over to the actions tab and create a JSON reader action called JSON Reader, set the trigger component to endpoint and link this action to the "JSON reader endpoint" that we created in Step 2.

Step 4. Add the JSON reader event

Next, add a new event to the JSON reader action created in Step 3. To do this click the + Add Event button at the bottom of the actions and events graph and set the event type to JSON reader.

Configure the JSON reader event by picking the file that is being passed in from your endpoint. Set the Single Row As option to use the custom model from step 1. This Single Row As variable is going to hold one row of data that is being looped over by the event. The final settings are listed below.

Finally, click on the trigger component and set the response variable in the trigger component to the SingleRow event variable, as below.

Step 5. build and test your code

To build your code, click the "Build code" button and wait for the code to build. Once the code has been built, open up your JSON reader endpoint that was made in Step 1. and click the run button.

Using the body variable input, upload the JSON file from your local machine. In our case this is called fake.json. Next click run.

Notice that you get both a 200 success code and that the response variable from your JSON reader action, "SingleRow", is displayed in your endpoint response. This is the same data that is in the JSON file upload. The JSON reader endpoint response body is shown below.

Now that you know how to use the JSON Reader event, you can combine this event with different events and workflows to do all kinds of things with your data. You can, for example, display the data in the front end of your app, extend the action to map this data into a Data Model and much much more.

Last updated