Data Source | Judo Documentation

Overview

To build an app that retrieves data and displays real-time updates in the underlying data, start by inserting a Data Source to the Judo canvas.

To configure a Data Source, you need to set up one of the following HTTP methods so it can make an API call (a request to a web-based Application Programming Interface (API) to interact with and retrieve data, or perform a specific action).

GET is used for retrieving information.
POST is used for submitting data and creating new resources.
PUT is used for updating existing resources or creating new resources if they don’t exist.

During the API call, the Data Source downloads a JSON file with a dataset from the internet. Under the selected HTTP method, paste the URL of the JSON file you want to use, replacing the demo file.

You can also set up the following optional parameters for a Data Source:

URL Parameters - Key-value pairs that are added to the end of a URL in an HTTP request to provide additional information to the server. They are separated from the base URL by a question mark (?) and are typically formatted as key-value pairs, separated by ampersands (&).
Header - Additional pieces of information sent by the client to the server or by the server to the client. Headers provide metadata about the request or the response and are sent as key-value pairs. They are included in the HTTP header section and don't appear directly in the URL.
Auto Refresh - Specify the time interval, in seconds, for automatic content updates.
Body (only in POST) - When you make a POST request, the data you want to send to the server (added as JSON) is included in the body of the request, which contains the information that the server needs to process.

To preview the dataset, click on the code in the Response section.

JSON Files

JSON files have a ".json" file extension and typically store data in a structured format using key-value pairs and arrays. Take, for example, this JSON example that represents information about a library, its book categories, individual books, and details about the reader.

{
    "library": [
        {
            "category": "Non-Fiction",
            "books": [
                {
                    "title": "The Anthropocene Reviewed",
                    "author": "John Green",
                    "review": 5,
                    "read": true,
                    "coverImageURL": "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1616514130l/55145261.jpg"
                },
                {
                    "title": "Ongoingness: The End of a Diary",
                    "author": "Sarah Manguso",
                    "read": false,
                    "coverImageURL": "https://m.media-amazon.com/images/I/71p0E9O+THL._AC_UF894,1000_QL80_.jpg"
                }
            ]
        },
        {
            "category": "Fiction",
            "books": [
                {
                    "title": "Jazz",
                    "author": "Toni Morrison",
                    "read": false,
                    "coverImageURL": "https://m.media-amazon.com/images/I/51nuJoKyiQL._AC_UF1000,1000_QL80_.jpg"
                },
                {
                    "title": "Lessons",
                    "author": "Ian McEwan",
                    "review": 4,
                    "read": true,
                    "coverImageURL": "https://m.media-amazon.com/images/I/71mnR5+w6PL._AC_UF1000,1000_QL80_.jpg"
                }
            ]
        }
    ],
    "reader": {
        "name": "Val",
        "profileImageURL": "https://avatars.githubusercontent.com/u/144824491?v=4",
        "timeSpentReading": "1 hour a day"
    }
}

Click to open the URL of this JSON file.

In this example, the JSON code represents a structure with two main components: library and reader.

The library key has an associated array value (a value that contains several objects), each representing a book category.
Each book category object has a category key (ie. "Non-Fiction," "Fiction") and a books key, which is an array of book objects.
Each book object has properties such as title, review, and read (a Boolean indicating whether the book has been read).
The reader key has an associated object value containing details about the reader, including name and profileImageURL (a URL pointing to the reader’s profile image).

Example

In this dataset, the library component contains an array of objects, each representing a book category, so you can only use it with a Collection. However, we can start building the profile details of the reader since it only consists of one object with the following properties: “name”, “profileImageURL”, and “timeSpentReading”.

Attaching a Data property to a layer is similar to binding a property to a layer in a component. However, instead of creating a new property or attaching it to an existing one, you’ll choose a property from the {} data menu option.

To bind an image from a dataset, insert an Async Image and attach the Fetched Image in the Inspector panel.

Collection