DEV Community

Phoebe M
Phoebe M

Posted on

Frontend Mentor - Job listings with filtering solution using Vue.js and Fetch API

This is a solution to the Job listings with filtering challenge on Frontend Mentor. Have you completed this challenge? What was your solution?

Table of contents


The challenge

Desktop Layout View

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Filter job listings based on the categories


My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • Vue.js - JS library

My Solution (In-Depth)

  • Using the JavaScript Fetch API, I loaded the job listing data and saved it to an array, jobList.
  loadDataFromJson: async function () {
    let url = "./data.json";

    await fetch(url)
    .then(async (response) => {
      this.jobList = await response.json();
    .catch((error) => console.log(error));
Enter fullscreen mode Exit fullscreen mode
  • The visibility of the filter bar is based on the length of the array, jobFilters.
  <div class="job-list-filter" v-show="jobFilters.length>0"> 
Enter fullscreen mode Exit fullscreen mode

On initial load, the jobFilters array is empty and, as a result, the filter bar is hidden. When a user clicks on the filter tabs on the right side of each job listing, the addFilter() method is invoked which checks to see if the filter already exists in jobFilters. If not, the value is stored in the array and the filter bar becomes visible.

  addFilter: function (filter) {
    var filterExists = this.jobFilters.includes(filter);
    if (!filterExists) {
Enter fullscreen mode Exit fullscreen mode
  • The jobList is rendered to the webpage using a computed property, filteredJobList. On initial load, all job listings are rendered since the user hasn't clicked on any filters yet. However, when the user clicks on a filter, the program uses the array methods, .filter() and .every(), to loop through jobList and display only the jobs that match the filters in jobFilters array.
  filteredJobList: function () {
      return this.jobList.filter((job) => {
        let items = [job.role, job.level, ...job.languages,];
        let filters = this.jobFilters;
        return filters.every((filter) => items.includes(filter));
Enter fullscreen mode Exit fullscreen mode

What I Learned

This challenge was a great way to refamiliarize myself with array helper methods such as .every(), and with using the Fetch API. I was also able to use CSS Grid and FlexBox to get the desired layout, which is always fun.

Useful resources


Top comments (0)