As the job market becomes increasingly competitive, job seekers rely on efficient tools to help them find the best opportunities. Whether you are a software engineer, product manager, or business leader, offering streamlined job search functionality can give your platform a significant edge. One of the most powerful ways to achieve this is by integrating a customised job API such as JSearch by OpenWeb Ninja.

The JSearch API provides real-time job postings, detailed insights, and customizable search filters that allow you to tailor job results to specific user needs. In this guide, we'll explore how you, as a developer, can filter and display job data using the JSearch API to enhance your job search platform.

Why Choose JSearch API for Job Listings?

Before we jump into the technical details, let's first understand the core advantages of using the JSearch API:

• Real-Time Data: JSearch API delivers live job postings and salary data, sourced from Google for Jobs, ensuring job seekers always get the most current information.
• Customisable Search Filters: It allows users to filter job searches based on query, location, job type, salary, and more, ensuring relevant and precise results.
• Comprehensive Job Details: The API provides rich job data, including job descriptions, employer details, estimated salary ranges, and posting dates.

By integrating JSearch API, you can create a platform that provides tailored job search results, catering to different user preferences.

Setting Up JSearch API

1. Get Your API Key

To begin, you’ll need to sign up with OpenWeb Ninja and get your API key. This key will allow you to authenticate requests to the JSearch API.

• Go to OpenWeb Ninja's website and create an account.
• After registration, retrieve your unique API key.
• Store the API key securely, preferably in environment variables, to avoid exposure in your source code.

2. Set Up API Authentication

JSearch API uses token-based authentication. You’ll need to include the API key in your request headers. Here’s how you can set up the authentication:

javascript
const fetchJobPostings = async (query) => {
const apiUrl = 'https://api.openwebninja.com/v1/job-search';
const apiKey = process.env.JSEARCH_API_KEY; // Store your key securely

const response = await fetch(`${apiUrl}?query=${query}`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
},
});

const data = await response.json();
return data;
};

3. Making a Request for Job Listings

Once the API key is set up, you can begin making requests to retrieve job data. For example, you might want to search for software engineering jobs in a specific city. Here’s a basic request:

javascript
const fetchJobPostings = async (query, location = '', page = 1, numPages = 1) => {
const apiUrl = `https://api.openwebninja.com/v1/job-search`;
const apiKey = process.env.JSEARCH_API_KEY;

const params = new URLSearchParams({
query,
location,
page,
numPages
});

const response = await fetch(`${apiUrl}?${params.toString()}`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
},
});

const data = await response.json();
return data.jobs; // Return list of job postings
};

In this example:

• query is the search term (e.g., "software engineer").
• location helps you narrow down results to a specific city or region.
• page and numPages manage pagination when the results are too large.

Filtering Job Results

1. Using Filters to Refine Job Searches

The JSearch API offers advanced filters to refine job results. Here’s an example of using these filters:

• Date Posted: Filter jobs based on when they were posted.
• Employment Type: Filter jobs based on whether they’re full-time, part-time, contract, etc.
• Salary: Filter jobs based on estimated salary range.
• Location Radius: Narrow job results to a specific radius around a city or location.

Here’s how you might implement these filters:

javascript
const fetchFilteredJobPostings = async (query, employmentType, datePosted, location = '') => {
const apiUrl = 'https://api.openwebninja.com/v1/job-search';
const apiKey = process.env.JSEARCH_API_KEY;

const params = new URLSearchParams({
query,
employmentType,
datePosted,
location
});

const response = await fetch(`${apiUrl}?${params.toString()}`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
},
});

const data = await response.json();
return data.jobs;
};

In this case:

• employmentType can be "full-time", "part-time", or "contract".
• datePosted filters the jobs based on when they were posted (e.g., "last 24 hours").
• location narrows the search to a specific city.

2. Salary Filter

The salary filter is particularly useful for job seekers who want to ensure that job listings meet their salary expectations. By integrating salary filters, you can offer more personalised job recommendations.

For example, if you wanted to filter jobs by salary range:

javascript
const fetchSalaryFilteredJobPostings = async (query, salaryRange) => {
const apiUrl = 'https://api.openwebninja.com/v1/job-search';
const apiKey = process.env.JSEARCH_API_KEY;

const params = new URLSearchParams({
query,
salaryRange
});

const response = await fetch(`${apiUrl}?${params.toString()}`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
},
});

const data = await response.json();
return data.jobs;
};

Here, salaryRange could be something like "50k-80k" or a more specific range.

3. Location and Remote Jobs

Another key feature is the ability to filter jobs by location. Whether you’re searching for jobs in a specific city or interested in remote work, JSearch API provides flexibility.

javascript
const fetchLocationFilteredJobPostings = async (query, location, radius = '50km') => {
const apiUrl = 'https://api.openwebninja.com/v1/job-search';
const apiKey = process.env.JSEARCH_API_KEY;

const params = new URLSearchParams({
query,
location,
radius
});

const response = await fetch(`${apiUrl}?${params.toString()}`, {
headers: {
'Authorization': `Bearer ${apiKey}`,
},
});

const data = await response.json();
return data.jobs;
};

This can help job seekers find remote positions or jobs located within a specific distance from their chosen location.

Displaying Job Listings

Now that we have retrieved job listings with filters, it’s time to display them. You can use this data to create a user-friendly job listing page, as shown in the following example using React:

javascript
import React, { useState, useEffect } from 'react';

const JobListings = ({ query, location, employmentType }) => {
const [jobs, setJobs] = useState([]);

useEffect(() => {
const fetchJobs = async () => {
const jobData = await fetchFilteredJobPostings(query, employmentType, 'last 24 hours', location);
setJobs(jobData);
};

`fetchJobs();`  

}, [query, location, employmentType]);

return (
<div>
{jobs.length > 0 ? (
<ul>
{jobs.map(job => (
<li key={job.job_id}>
<h3>{job.title}</h3>
<p>{job.company}</p>
<p>{job.location}</p>
<p>{job.salary}</p>
</li>
))}
</ul>
) : (
<p>No jobs found for this query.</p>
)}
</div>
);
};

export default JobListings;

This React component fetches job data based on filters (query, location, and employment type) and displays it in a list format.

Handling Errors and Edge Cases

As with any integration, it’s essential to handle errors gracefully. For instance, you might encounter network issues or no results being returned from the API. Here’s how you could manage errors:

javascript
const fetchJobPostings = async (query) => {
try {
const response = await fetch(`https://api.openwebninja.com/v1/job-search?query=${query}`, {
headers: { 'Authorization': `Bearer ${apiKey}` },
});
if (!response.ok) throw new Error('Failed to fetch job postings');
const data = await response.json();
return data.jobs;
} catch (error) {
console.error('Error fetching job postings:', error);
return [];
}
};

Conclusion

Integrating the JSearch API into your application can drastically improve the job search experience for users. With powerful search filters, real-time job listings, and detailed data, the JSearch API allows you to build a customised, user-friendly platform that connects job seekers with their ideal opportunities. By following this guide, you can quickly set up and begin filtering job data to meet the needs of your users.

If you’re a developer looking to enhance your job search platform, this API is a great tool to integrate for efficient and accurate job search results.