Фильтрация через Lever API с использованием Javascript

Question

В настоящее время я пытаюсь фильтровать задания с помощью Lever API, пытаясь сгруппировать их по группам, чтобы упростить их просмотр. Я могу получать данные через API, но мне трудно отображать контент, и нумерация страниц, кажется, подсчитывает элементы. Я впервые работаю с JS. Буду признателен за любую помощь!

Вот мой кодовый блок: [https://codepen.io/perlap156/pen/BaNWKWE?editors=0010] [1]

HTML:

<section id="career-container">
    <div class="l-container u-push--top-3 u-text-left">
        <h1 class="all-caps all-caps--heavy" id="open-positions">Open Positions</h1>
    </div>

    <div class="career-filters l-container l-container--narrow u-push--bottom-4">
        <p class=" career-filters--label alt-italic">Filter By:</p>
        <div class="career-filters--select input-select">
            <select class="career-locations compact">
                <option value="All locations">All Locations</option>
            </select>
        </div>
        <div class="career-filters--select input-select">
            <select class="career-teams compact">
                <option value="All teams">All Teams</option>
            </select>
        </div>
        <div class="career-filters--select input-select">
            <select class="career-commitments compact">
                <option value="All work types">All Work Types</option>
            </select>
        </div>
    </div>

    <div class="career-list l-container l-container--narrow" id="lever-jobs-container">
        <p class="no-career-result u-text-center" style="display:none;">No positions available. Try again.</p>
    </div>

    <div class="career-pagination u-text-center">
        <button class="button button--outline page-button prev">Prev</button>
        <button class="button button--outline page-button next">Next</button>
    </div>
</section>

JavaScript:

function loadLeverJobs () {

  /**
* Variables
****************************/

// Location
var pageUrl = window.location.href;
// Checking for potential Lever source or origin parameters
var leverParameter = '';
var trackingPrefix = '?lever-';

var pageSize = 10;
var lastPage;

// Selectors
var $careerLocations = $('.career-filters .career-locations');
var $careerTeams = $('.career-filters .career-teams');
var $careerCommitment = $('.career-filters .career-commitments');
var $careerListContainer = $('#career-container .career-list');  

if( pageUrl.indexOf(trackingPrefix) >= 0){
  // Found Lever parameter
  var pageUrlSplit = pageUrl.split(trackingPrefix);
  leverParameter = '?lever-'+pageUrlSplit[1];
}

  /**
* Functions
****************************/

  // Functions for checking if the variable is unspecified
  function cleanString(string) {
    if (string) {
      var cleanString = string.replace(/\s+/ig, "");
      return cleanString;
    }
    else {
      return "Uncategorized";
    }
  }

  function nullCheck(string) {
    if (!string) {
      return 'Uncategorized';
    }
    else {
      return string;
    }
  }

function renderCareers(_data) {
  var groupedPostings = [];
  var careersList =[];
  var careerPosting = "";

  if (!_data.length) {
      $careerListContainer.html('<p class="no-career-result u-text-center u-push--bottom-4 u-push--top-3 alt-italic">No positions available.</p>');
      } else {


  for(var i = 0; i < _data.length; i++) {

    if (!_data[i]) continue;
    if (!_data[i].postings) continue;
    if (!(_data[i].postings.length > 0)) continue;

    var title = cleanString(_data[i].title || 'Uncategorized');
    var titleNullCheck = nullCheck(title);

    for (j = 0; j < _data[i].postings.length; j ++) {
      var posting = _data[i].postings[j];
      var team = (posting.categories.team || 'Uncategorized' );
      var teamNullCheck = nullCheck(team);
      var department = (posting.categories.department || 'Uncategorized' );
      var departmentNullCheck = nullCheck(department);

      function findDepartment(element) {
        return element.department == departmentNullCheck;
      }

      if (groupedPostings.findIndex(findDepartment) === -1) {

        newDepartmentToAdd = {department : departmentNullCheck, departmentTitle: department, teams : [ {team: teamNullCheck, teamTitle: team, postings : []} ] };
        groupedPostings.push(newDepartmentToAdd);
      }
      else {

        departmentIndex = groupedPostings.findIndex(findDepartment);
        newTeamToAdd = {team: teamNullCheck, teamTitle: team, postings : []};

        if (groupedPostings[departmentIndex].teams.map(function(o) { return o.team; }).indexOf(teamNullCheck) === -1) {
          groupedPostings[departmentIndex].teams.push(newTeamToAdd);
        }
      }
      function findTeam(element) {
        return element.team == teamNullCheck;
      }
      departmentIndex = groupedPostings.findIndex(findDepartment);
      teamIndex = groupedPostings[departmentIndex].teams.findIndex(findTeam);
      groupedPostings[departmentIndex].teams[teamIndex].postings.push(posting);

    }

  }

  // Sort by department
  groupedPostings.sort(function(a, b) {
    var departmentA=a.department.toLowerCase(), departmentB=b.department.toLowerCase()
    if (departmentA < departmentB)
        return -1
    if (departmentA > departmentB)
        return 1
    return 0
  });

  for(var i = 0; i < groupedPostings.length; i++) {

    // If there are no departments used, there is only one "unspecified" department, and we don't have to render that.
    if (groupedPostings.length >= 2) {
      var haveDepartments = true;
    };

    if (haveDepartments) {
      var department = groupedPostings[i].departmentTitle;

      careerPosting += '<section class="lever-department" data-department="' + department + '"><h3 class="lever-department-title">' + department + '</h3>';
    };

    for (j = 0; j < groupedPostings[i].teams.length; j ++) {
      var team = groupedPostings[i].teams[j].teamTitle;

        careerPosting += '<div class="career-list--container u-pad--bottom-3" data-team="' + team + '"><h2 class="all-caps all-caps--heavy heading-underline" style="color: #767676;">' + team + '</h2>';

      for (var k = 0; k < groupedPostings[i].teams[j].postings.length; k ++) {

        var team = groupedPostings[i].teams[j].postings[k].categories.team;
        var teamCleanString = cleanString(team);
        var department = groupedPostings[i].departmentTitle;
        var departmentCleanString = cleanString(department);
        var location = groupedPostings[i].teams[j].postings[k].categories.location;
        var locationCleanString = cleanString(location);
        var commitment = groupedPostings[i].teams[j].postings[k].categories.commitment;
        var commitmentCleanString = cleanString(commitment);
        var jobTitle = groupedPostings[i].teams[j].postings[k].text;
        var link = groupedPostings[i].teams[j].postings[k].hostedUrl;

        careerPosting += '<div class="career-list--post" data-department="' + departmentCleanString +'" data-team="' + teamCleanString + '" data-location="' + locationCleanString + '"data-work-type="' + commitmentCleanString + '"><div class="career-list__text">' +
          '<h3>'+ jobTitle + '</h3>' +
          '<p><span class="u-pad--right-2">'+ location + '</span><span class="u-pad--right-2">' + commitment + '</span></p></div><div><a class="button button-primary micro" href="' + link + '">Apply</a></div></div>';
      }

      careerPosting += '</div>';

    }
    if (haveDepartments) {
      careerPosting += '</section>';
    };

  }
      careersList.push(careerPosting);
      }

  //$careerListContainer.innerHTML = careersList;
  $careerListContainer.html(careersList.join(''));
  console.log($careerListContainer);
  }//END of renderCareers

function renderFilters(_data) {
  // Adding Team values to Team Sort select drop-downs
  var teams = [];
  for(i = 0; i < _data.length; i++) {
  var team = nullCheck(_data[i].categories.team);
  var teamOption = '<option class="job-team">'+team+'</option>';    
  // Check for duplicates
  if (teams.indexOf(teamOption) === -1) {
    teams.push(teamOption);
  }
  teams.sort();
  }
  $careerTeams.append(teams.join(''));
  console.log(teams);

  // Adding Location values to Location Sort select drop-downs
  var locations = [];
  for(i = 0; i < _data.length; i++) {
  var location = nullCheck(_data[i].categories.location);
  var locationOption = '<option class="job-location">'+location+'</option>';
  // Check for duplicates
  if (locations.indexOf(locationOption) === -1) {
    locations.push(locationOption);
  }
  locations.sort();
  }
  $careerLocations.append(locations.join(''));

  // Adding Commitment values to Work Type Sort select drop-downs
  var commitments = [];
  for(i = 0; i < _data.length; i++) {
  var commitment = nullCheck(_data[i].categories.commitment);
  var commitmentOption = '<option class="job-commitment">'+commitment+'</option>';
  // Check for duplicates
  if (commitments.indexOf(commitmentOption) === -1) {
      commitments.push(commitmentOption);
  }
  commitments.sort();
  }
  $careerCommitment.append(commitments.join(''))
  console.log(commitments);
};//END of renderFilters

function fetchData(options, callback) {
var leverUrl = 'https://api.lever.co/v0/postings/mizzenandmain?mode=json';
if (options.page) {
leverUrl += '&limit=' + pageSize + '&skip=' + ((options.page - 1) * pageSize);
if (!options.noCheckPagination) {
  lastPage = options.page;
}
}
if (options.team) {
leverUrl += '&team=' + options.team;
}
if (options.location) {
leverUrl += '&location=' + options.location;
}
if (options.commitment) {
leverUrl += '&commitment=' +options.commitment;
}
$.ajax({
dataType: "json",
url: leverUrl,
success: function(data){
  if (!options.noCheckPagination && options.page) {
    checkPagination(options);
  }
  callback(data);
} ,
error: function() {
  $careerListContainer.html('<p class="no-career-result">Content is not available.</p>');
}
});
} //END of fetchData

function checkPagination(options) {
// Prev needs to be disabled on page 1.
$('.career-pagination .prev').attr("disabled", lastPage <= 1);
options.noCheckPagination = true;
options.page += 1;
fetchData(options, function(data) {
if(!data.length) {
  $('.career-pagination .next').attr("disabled", true);
} else {
  $('.career-pagination .next').attr("disabled", false);
}
});
}//END of checkPagination

// Handlers for pagination buttons
function prevButton () {
if (!$(this).attr('disabled') && lastPage > 1) {
var teamValue = $careerTeams.val();
var locationValue = $careerLocations.val();
var commitmentValue = $careerCommitment.val();
if (teamValue == "All teams") {
  teamValue = null;
}
if (locationValue == "All locations") {
  locationValue = null;
}
if (commitmentValue == "All work types") {
    commitmentValue = null;
}
$('html, body').animate({
    scrollTop: $("#career-container").offset().top - 150
}, 500);
fetchData({team:teamValue, location: locationValue, commitment: commitmentValue, page: lastPage -= 1 }, function(data){
  renderCareers(data);
});
}
} //END of prevButton

function nextButton () {
  if (!$(this).attr('disabled')) {
    var teamValue = $careerTeams.val();
    var locationValue = $careerLocations.val();
    var commitmentValue = $careerCommitment.val();

    if (teamValue == "All teams") {
      teamValue = null;
    }
    if (locationValue == "All locations") {
      locationValue = null;
    }
    if (commitmentValue == "All work types") {
        commitmentValue = null;
    }
    $('html, body').animate({
        scrollTop: $("#career-container").offset().top - 150
    }, 500);
    fetchData({team:teamValue, location: locationValue, commitment: commitmentValue, page: lastPage += 1 }, function(data){
      renderCareers(data);
    });
  }
} //END of nextButton

// === Sorting/Filters job postings triggered from select drop downs
function filterCareers() {
  var teamValue = $careerTeams.val();
  var locationValue = $careerLocations.val();
  var commitmentValue = $careerCommitment.val();
  page = 1;

  if (teamValue == "All teams") {
  teamValue = null;
  }
  if (locationValue == "All locations") {
  locationValue = null;
  }
  if (commitmentValue == "All work types") {
  commitmentValue = null;
  }
  fetchData({team:teamValue, location: locationValue, commitment: commitmentValue, page: 1}, function(data){
  renderCareers(data);
  });
} //END of filterCareers

// Event Handlers (for pagination btns and drop-down filters)
$('.career-pagination .prev').click(prevButton);
$('.career-pagination .next').click(nextButton);
$('.career-filters select').change(filterCareers);

// Init render filters
fetchData({}, function(data){
renderFilters(data);
});

// Init render careers
fetchData({page: 1}, function(data){
  renderCareers(data);
});
}

$(function() {
loadLeverJobs();
});```