Epicollect API Guide
  • Epicollect5 API
  • Entries
    • Get Entries
    • Get Branch Entries
  • Project
    • Get Project
  • Media
    • Get Media
  • Projects
    • Project Search
  • API Authentication
    • Create Client App
    • Retrieve Token
    • Access Resources
      • JQuery
      • PHP
      • Axios
      • Fetch API
  • Examples
    • Getting Entries
    • Getting Branch Entries
    • Getting Media
    • PyEpicollect
    • Using R
Powered by GitBook
On this page
  1. API Authentication
  2. Access Resources

Fetch API

PreviousAxiosNextGetting Entries

Last updated 7 months ago

The provides a JavaScript interface for making HTTP requests and processing the responses.

Using fetch()

// Replace parameters with your own credentials
const params = {
  grant_type: 'client_credentials',
  client_id: 4879,
  client_secret: 'XbIHCZHh5WQhJCaLduHSAzzddFFI6PkHA78XUZeE'
};

// Replace with your project slug
const projectSlug = "ec5-api-private";

// Perform Fetch request to get token
fetch('https://five.epicollect.net/api/oauth/token', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/vnd.api+json'
  },
  body: JSON.stringify(params)
})
.then(response => response.json())
.then(data => {
  console.log(JSON.stringify(data));
  // The token is valid for 2 hours, let's get the entries
  _getEntries(data.access_token);
})
.catch(error => {
  console.error(error);
});

// Get the entries, passing token for authorization
function _getEntries(token) {
  fetch(`https://five.epicollect.net/api/export/entries/${projectSlug}`, {
    headers: {
      'Content-Type': 'application/vnd.api+json',
      'Authorization': `Bearer ${token}`
    }
  })
  .then(response => response.json())
  .then(data => {
    console.log(JSON.stringify(data, null, 2));
    document.querySelector('.content').textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error(error);
    document.querySelector('.content').textContent = JSON.stringify(error, null, 2);
  });
}
Fetch API
JSFiddle