# HTTP Request
The HTTP Request step allows you to send HTTP requests to a server. \
UI component values and other variables can be sent as request parameters using the `{{ui.input.value}}` syntax.
By default, you don't even need to connect an HTTP data source to send HTTP requests. You simply need to specify the URL and send the request.
{% hint style="info" %}
Consider connecting your HTTP data source when you need to share the same URL or other settings between multiple HTTP Request steps.
{% endhint %}
## Action configuration
The HTTP Request action step supports the following **types of requests**: GET, POST, DELETE, PUT, HEAD, OPTIONS, PATCH.
Other settings you can configure include the following:
* **URL** - The API or webhook URL to send the request to.
* **Headers** - HTTP headers to include in the request.
* **Body** - The HTTP body to send with the request, commonly used to send Form data or JSON data.\
Such HTTP methods as *POST*, *DELETE*, *PUT*, and *PATCH* require a request Body that you can send as:
* Raw
* JSON (sent as a JSON string)
* Form Data
* x-www-form-urlencoded
* Binary
* **Query Params** - HTTP query parameters to include in the request.
### Data transformation
If the database returns its data in a different format than expected for the components, you can modify it. For example, you can turn on the **Transform result** toggle in the action's settings or add a new *JavaScript Code* step to transform the data.
Here are some examples of possible data transformations:
* Access an inner array object and map it to a new array:
```javascript
return {{data}}.map(item => {
return {
id: item.id,
name: item.name.toUpperCase(),
};
});
```
* Add a new key to the array of objects:
```javascript
return {{data}}.map(item => {
return {
...item, // put all the keys from the original object
created_at: new Date(), // add a new property
};
});
```
* Filter an array of objects (short version):
```javascript
return {{data}}.filter(item => item.id > 10);
```
Multiline version:
```javascript
return {{data}}.filter((item) => {
return item.id > 10;
});
```
### Input & Output
* **Input**
No specific input is required. The `{data}}` and `{{params}}` variables can be used to access the result of the previous step or incoming action's parameters.
* **Output**
* `{{data}}` - API request result
* `{{error}}` - API request error
* `{{res}}` - full HTTP response object
### Examples
#### Adding additional values
```javascript
const values = {{ui.form.value}};
return {
...values,
created_at: new Date(),
}
```
#### Changing values
```javascript
const values = {{ui.form.value}};
return {
...values,
name: values.name.toUpperCase(),
}
```
#### Deleting unwanted values
```javascript
const values = {{ui.form.value}};
delete values.age;
return values;
```
alternatively:
```javascript
const values = {{ui.form.value}};
const { created_at, ...rest } = values;
return rest;
```
#### Joining array values
```javascript
const values = {{ui.form.value}};
return {
...values,
tags: values.tags.join(','),
}
```
#### Using default values
```javascript
const values = {{ui.form.value}};
return {
...values,
// if the value is not set, use the default value
created_at: values.created_at || new Date(),
}
```
## Importing cURL commands
UI Bakery also allows importing cURL commands as HTTP actions.
While creating an HTTP Request action, you can click the **Import as CURL** button and paste your command in the box. The system will fill in the configuration automatically.
## Use cases
* [Send arrays in Query parameters](#sending-arrays-in-query-parameters)
* [Load items from API and modify the result](#loading-items-from-api-and-modifying-the-result)
* [Send a Form using API request](#sending-a-form-using-api-request)
### Sending arrays in Query parameters
If you need to send an array of items in the query parameters, you can do it by iterating over a collection and building the array query parameter from it.
Here is an example:
Let's say you have a **Select** component with the *Multiple select* setting enabled and you want to include the selected values in the query parameters.
The selected values from the component will be available as `{{ui.select.value}}` in the URL field. So, to build the array query parameter, you can iterate over the selected values resulting in something like this:
```javascript
https://example.com?{{ui.select.value.map(item => `items[]=${item}`).join('&')}}
```
{% hint style="info" %}
This code is an example and the actual implementation may depend on the platform and context.
{% endhint %}
### Loading items from API and modifying the result
1. Create an action, select your *HTTP API* data source and the *HTTP Request* action type.
2. Select the **GET** method and set the **API URL**, for example:
`https://example-data.draftbit.com/users?_limit=5`
3. Turn on the **Transform result** toggle and add a JavaScript function to modify the result:
```javascript
return {{data}}.map(item => {
return { ...item, fullName: item.firstName + ' ' + item.lastName };
});
```
{% hint style="info" %}
You can learn more about data mapping [here](https://docs.uibakery.io/build-from-scratch/getting-started/transform-data-with-javascript/mapping-and-transforming-data).
{% endhint %}
4. Click **Execute action** and check the result.
### Sending a Form using API request
Let's take look at how to send a form to make a POST API request:
1. Add the **Form** component to your working area.
2. Create a new action, select your *HTTP API* data source and the *HTTP Request* action type.
3. Select the **POST** method and set the **API URL**.
4. Next, click on the **Body** tab and change its format to *JSON*.\
There, reference your newly added form as `{{ui.myForm.value}}`.
5. Assign this action to the Form's **On Submit** trigger.
6. Fill in the Form, click **Submit** and check the result.
Now, whenever you click the *Submit* button, the action will be executed and the POST API request will be sent to the API.
## Troubleshooting & debugging
Sometimes your API may return an error, for example, if a required field is missing or the value is incorrect. \
In such cases, you can open the **Payload** tab of the action and investigate header, url, body, and other parameters to check the data sent to the server.
