Overview
A custom careers page allows you to showcase job opportunities within your company website, tailored to your brand and style. This guide will help you build a dynamic and engaging careers page by consuming job listings from Occupop API and displaying them in a user-friendly format.
Step 1: Understand the JSON API
Before you start, make sure you understand the structure of the JSON data that the API returns. Typically, the API might return data in the following format:
{
"data": [
{
"uuid": "string",
"title": "string",
"description": "string",
"location": {
"city": "string",
"state": "string",
"country": "string",
"city_id": "string",
"city_full_name": "string",
"city_lat": "string",
"city_lng": "string",
"country_short": "string"
},
"sectors": [
{
"uuid": "string",
"name": "string"
}
],
"subsectors": [
{
"uuid": "string",
"name": "string"
}
],
"contract": "string",
"period": "string",
"salary": {
"type": "string",
"period": "string",
"start": "string",
"end": "string",
"details": "string"
},
"published_at": "string",
"questions_form": {
"type": "string",
"text": "string",
"options": "string",
"answer": "string"
},
"closed_for_applicants": true,
"require_cv": true,
"require_opt_in_for_job": true,
"require_opt_in_for_database": true,
"apply_url": "string",
"unique_slug": "string",
"cv_upload_signed_url": "string",
"company_name": "string",
"company_logo": "string",
"company_label_uuid": "string",
"created_at": "string"
}
],
"links": {
"first": "string",
"last": "string",
"prev": "string",
"next": "string"
},
"meta": {
"current_page": 0,
"from": 0,
"last_page": 0,
"links": [
{
"url": "string",
"label": "string",
"active": true
}
],
"path": "string",
"per_page": 0,
"to": 0,
"total": 0
}
}
Step 2: Generate a private token
First, go to Occupop and under Settings > API Settings, generate a private token (or use one you've already generated).
If you have doubts about how to generate it, check out our Getting Started guide.
Step 3: Fetch Data from the JSON API
To fetch data from the JSON API, you can use JavaScript's fetch function.
Here is an example of how you might do this:
<html>
<head>
<title>Job Listings</title>
</head>
<body>
<h1>Check out our current opportunities</h1>
<table id="jobs-container"></table>
<script>
const token = 'your-private-token-comes-here'
const apiUrl = '<http://api.occupop.com/rest/jobs>'
async function fetchJobs() {
try {
const response = await fetch(apiUrl)
const jobs = await response.json().data
displayJobs(jobs)
} catch (error) {
console.error('Error fetching jobs:', error)
}
}
function displayJobs(jobs) {
const jobsContainer = document.getElementById('jobs-container')
jobsContainer.innerHTML = ''
jobs.forEach(job => {
const jobElement = document.createElement('tr')
jobElement.innerHTML = `
<td><b>${job.title}</<b>></td>
<td>${job.location.city_full_name}</td>
<td>${job.sectors[0].name}</td>
<td><a href="${job.apply_url}">Apply now!</a></td>
`
jobsContainer.appendChild(jobElement)
});
}
fetchJobs();
</script>
</body>
</html>
Conclusion
By following these steps, you can consume a list of jobs from Occupop API and display them on your webpage as HTML. Customize the code to fit your specific requirements and design preferences.