Making API requests

To quickly connect a custom API use HTTP Request Builder. You can make GET request to visualizing orders data in Table component or POST request to reset a password for a specific user.

Open API Builder

1. Go to Component Settings then click Add Data Source

2. Choose Resource – Rest API then choose Collection – Make an HTTP request

Pass parameters

To pass parameters from API Query Builder, such as customer id you need to specify it as a parameter.

• Go to Parameters then click +Add Field

• Specify Parameter type (for example, Number Field for ID parameter or Text Field for Email parameter)

• Mark as Required (if you need to make this field required)

• Specify query parameters

• Set customer value in Tokens and run query

Use app variable values in your request

Tokens are app variables that store Jet's data. There are different type of tokens that you can use on your requests:

• Parameters. When you create a new parameter it becomes available as tokens

• Current User. User's account properties like email, id, token, etc. available in Current User. You can specify custom properties)

• Pagination

• Sorting

You can specify default values for your tokens that will use in the request.

Transform a body of your request

To transform a body before the request is performed you can specify Body Transformer. You can modify your function's return value by adding a transformer. Use the identifier data for the return value and enter any expressions to modify the result, such as add a property or loop over the data set.

return data['email'];

Transform a response of your request

For simple transformers, you can use response nested keys to transform the response:

For more complex transformers, you can use a JavaScript response transformer. Thedata is a JS variable that stores a response from your request. You can find it in Advanced Settings:

function getProperties(data) {
    result = {};
    for (var key in data) {
        result[key] =  data[key]['value'];
    }
    return result;
}
​
function contactMapper(contactData) {
    result = getProperties(contactData['properties']);
    result['dealId'] = contactData['dealId'];
    return result;
}
return  data['deals'].map((x)=>contactMapper(x));

Sorting your data

You can sort all fields by ascending and descending value:

Pagination

APIs like to send data back in pages. By default, you only get 1 page. You will need to ask for more. In your API docs, there is probably a section called Pagination.

There are 3 types of pagination: page, offset, and cursor pagination.

Page based pagination

If you see the mention of a numerical page number that you increment to get each page, then you are in the right place.

Intercom uses this style of pagination. And it looks like this in their docs:

The first page from this endpoint would look like this: https://api.intercom.io/users?page=0

$ curl https://api.intercom.io/users?page=0 \
-H 'Authorization:Bearer <access_token>' \
-H 'Accept:application/json'

In API Builder that would be set up with these settings:

Offset pagination

If you see the word offset in your API docs, this is the style for you. Hubspot uses this style. Their docs say:

Some endpoints support a way of paging the dataset, taking an offset and limit as query parameters:

https://api.hubapi.com/v1/deals/v1/deal/paged?offset=20&limit=20
​

In this example, in a list of 20 (total) singles by the specified deal: from the twentieth (offset) deal, retrieve the next 10 (limit) deals.

In Jet API Builder that would be set up with these settings:

https://api.hubapi.com/v1/deals/v1/deal/paged?offset={{paging.offset}}&limit={{paging.limit}}

Cursor based pagination

Sometimes APIs use something that looks weird for their pagination. Each call may return a cursor key to use to get the next page. Something like "nextPageCursor": "<cursor_key>" or ID as the next cursor (Stripe API) "next cursor" : data['data'][data['data'].length - 1].id

For instance, Stripe sends back a URL as well as a cursor (object ID) to use to get the next page. Their docs show this:

You can send this in two ways. Either use the cursor or use the full URL. If you use the cursor, you need to send it in a parameter:

For instance, Stripe API in Jet API Builder that would be set up with these settings:

https://api.stripe.com/v1/customers?limit={{paging.limit}}&starting_after={{paging.cursor_next}}&ending_before={{paging.cursor_prev}}