How to get tasks from ClickUp using JavaScript

No items found.

This tutorial is part of a series on building product integrations.

What is ClickUp?

ClickUp is an all-in-one project management tool that empowers teams to manage tasks, projects, and workflows efficiently. It's packed with features ranging from process management to time tracking and collaboration tools, enabling teams to simplify operations and boost productivity. ClickUp comes with a powerful API, allowing you to retrieve tasks and integrate with other software or platforms.

What you’ll learn

By using the ClickUp API, you can expand and customize ClickUp's functionality, leading to more user functionality for your customers. In this tutorial, we’ll cover accessing tasks from a customer’s ClickUp system including:

Navigating your way through ClickUp API authentication
Understanding how to extract [normalized data] from ClickUp, including executing get requests for task retrieval
Ways to use a single API endpoint to connect with hundreds of different third-party ticketing systems

Getting started with authentication

To get tasks from the ClickUp API, you will need to make a GET request to the ClickUp API endpoint for tasks. The endpoint URL is: `https://api.clickup.com/api/v2/list/{list_id}/task`. The `list_id` parameter in the URL should be replaced with the ID of the list that you want to retrieve tasks from.

Note: this will only return tasks from the specific list, not from any sublists.

Getting tickets from ClickUp

An example of a JavaScript GET request to the ClickUp API might look like this:


fetch('https://api.clickup.com/api/v2/list/{list_id}/task', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': {ACCESS-TOKEN}
    }
})
.then(response => response.json())
.then(data => console.log(data));

In this code, replace `{list_id}` with the ID of your list, and `{ACCESS-TOKEN}` with your access token. The `fetch` function sends a GET request to the ClickUp API, and the headers object includes the necessary authorization and content type headers.

The response from the ClickUp API will be a JSON object, which we convert to a JavaScript object with `response.json()`. The resulting `data` object will be an array of task objects, each with properties such as `id`, `name`, `status`, `assignees`, `due_date`, and more.

‍Remember to handle any errors that might occur during the fetch operation. You can do this by adding a `.catch()` block to the promise chain:


fetch('https://api.clickup.com/api/v2/list/{list_id}/task', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': {ACCESS-TOKEN}
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

This will log any errors to the console, but in a production environment, you might want to handle errors in a different way, such as by displaying an error message to the user.

The following script first gets the access token using the provided client ID, client secret, and authorization code. It then fetches the teams from the ClickUp API and for each team, it gets the tasks in a paginated manner. The <code class='blog_inline_code'>fetchTasks</code> function is recursive and continues to fetch the next page of tasks as long as tasks are returned from the API. When no more tasks are returned, the recursion stops and the function returns.


```javascript
const axios = require('axios');
const client_id = 'YOUR_CLIENT_ID'; // Replace with your client ID
const client_secret = 'YOUR_CLIENT_SECRET'; // Replace with your client secret
let access_token = '';

// Fetch access token
axios.post('https://api.clickup.com/api/v2/oauth/token', {
  client_id: client_id,
  client_secret: client_secret,
  code: 'AUTHORIZATION_CODE' // Replace with your authorization code
}).then(response => {
  access_token = response.data.access_token;

  // Fetch teams
  axios.get('https://api.clickup.com/api/v2/team', {
    headers: {
      Authorization: access_token
    }
  }).then(response => {
    const teams = response.data.teams;

    // Fetch tasks for each team
    teams.forEach(team => {
      let page = 0;
      const team_id = team.id;

      const fetchTasks = () => {
        axios.get(`https://api.clickup.com/api/v2/team/${team_id}/task`, {
          params: {
            order_by: 'updated',
            subtasks: true,
            include_closed: true,
            page: page
          },
          headers: {
            Authorization: access_token
          }
        }).then(response => {
          const tasks = response.data.tasks;
          // Process tasks here

          if (tasks && tasks.length > 0) {
            // If there are tasks, fetch next page
            page++;
            fetchTasks();
          }
        }).catch(error => {
          console.error('Error fetching tasks:', error);
        });
      };

      // Start fetching tasks
      fetchTasks();
    });
  }).catch(error => {
    console.error('Error fetching teams:', error);
  });
}).catch(error => {
  console.error('Error fetching access token:', error);
});
```

You should replace <code class='blog_inline_code'>YOUR_CLIENT_ID</code>, <code class='blog_inline_code'>YOUR_CLIENT_SECRET</code>, and <code class='blog_inline_code'>AUTHORIZATION_CODE</code> with your actual client ID, client secret, and authorization code. Also replace <code class='blog_inline_code'>// Process tasks here</code> with whatever you want to do with the tasks (e.g., printing them out, storing them in a database, etc.).

An example of an individual item returned by this API Endpoint is:

{
    "id": "task1",
    "url": "https://app.clickup.com/t/task1",
    "list": {
        "id": "list1",
        "name": "Design",
        "access": true
    },
    "name": "Design Homepage",
    "tags": [
        {
            "name": "design",
            "tag_bg": "#f2f2f2",
            "tag_fg": "#000000",
            "creator": 1
        }
    ],
    "space": {
        "id": "space1"
    },
    "folder": {
        "id": "folder1",
        "name": "Website Redesign",
        "access": true,
        "hidden": false
    },
    "parent": "task0",
    "status": {
        "type": "Open",
        "color": "#ff0000",
        "status": "active",
        "orderindex": 1
    },
    "creator": {
        "id": 1,
        "color": "#f2f2f2",
        "email": "johndoe@example.com",
        "username": "johndoe",
        "profilePicture": "https://example.com/profile.jpg"
    },
    "project": {
        "id": "project1",
        "name": "Website Redesign",
        "access": true,
        "hidden": false
    },
    "team_id": "team1",
    "archived": false,
    "due_date": "2022-12-31T00:00:00.000Z",
    "priority": {
        "id": "high",
        "color": "#ff0000",
        "priority": "High",
        "orderindex": "1"
    },
    "watchers": [],
    "assignees": [
        {
            "id": 1,
            "color": "#f2f2f2",
            "email": "johndoe@example.com",
            "initials": "JD",
            "username": "johndoe",
            "profilePicture": null
        }
    ],
    "checklists": [],
    "orderindex": "1",
    "time_spent": 3600,
    "date_closed": null,
    "description": "Design the new homepage for the website.",
    "date_created": "2022-01-01T00:00:00.000Z",
    "date_updated": "2022-01-02T00:00:00.000Z",
    "dependencies": [],
    "linked_tasks": [],
    "text_content": "Design the new homepage with a modern and clean look.",
    "custom_fields": [
        {
            "id": "custom1",
            "name": "Notes",
            "type": "text",
            "required": false,
            "type_config": {
                "default": null,
                "options": [],
                "placeholder": null
            },
            "date_created": "2022-01-01T00:00:00.000Z",
            "hide_from_guests": false
        }
    ],
    "time_estimate": null,
    "permission_level": "admin"
}

Use a unified ticketing API to integrate at scale

In this article, we walked through the process of getting Tasks from ClickUp using JavaScript. But what if your clients use a variety of ticketing systems?

You can integrate your product with all of your clients' ticketing solutions to sync tasks—among other types of data—by leveraging Merge, the leading Unified API solution.

Simply build to Merge's Ticketing and Project Management Unified API to offer 30+ ticketing integrations. You'll also be able to access Merge's robust Integrations Management features to identify and troubleshoot issues quickly and successfully.

You can learn more about Merge by scheduling a demo with one of our integration experts.

No items found.

How to get tasks from ClickUp using JavaScript

What is ClickUp?

What you’ll learn

Getting started with authentication

Getting tickets from ClickUp

Use a unified ticketing API to integrate at scale

Read these next

Insights

5 alternatives to Tray.io

Insights

‍Build or buy integrations? How to land on the best decision

Insights

White label API integration: benefits, drawbacks, and tools

Read these next

Insights

5 alternatives to Tray.io

Insights

‍Build or buy integrations? How to land on the best decision

Insights

White label API integration: benefits, drawbacks, and tools

Read these next

Email Updates

Subscribe to the Merge Blog

Get our best content every week