(function(window) {
  var numberOfJobs = 3;
  var path = '/jobs?include=company,category,hourly_pay'
  var pageParam = '&page' + encodeURIComponent('[') + 'size' + encodeURIComponent(']') + '=' + numberOfJobs;
  // var filterParam = '&filter' + encodeURIComponent('[') + 'hidden' + encodeURIComponent(']') + '=true';
  var filterParam = '';
  var sortParam = '&sort=-featured,filled,-job_date';

  var baseURL = 'https://api.justarrived.se/api/v1';
  JOBS_ENDPOINT = baseURL + path + pageParam + filterParam + sortParam;

  function getJobs(callback) {
  $.ajax({
      url: JOBS_ENDPOINT,
      type: 'GET',
      dataType: 'json',
      success: function(response) {
        callback(response.data, response.included);
      },
      error: function() {
        console.error('ja-jobs.js: API Request failed!');
      },
      beforeSend: function(xhr) {
        xhr.setRequestHeader('X-API-KEY-TRANSFORM', 'underscore');
        xhr.setRequestHeader('X-API-LOCALE', CURRENT_LOCALE);
        xhr.setRequestHeader('Content-Type', 'application/vnd.api+json');
      }
    });
  }

  function formatTemplate(template, name, value) {
    var regex = new RegExp(name, 'g');
    return template.replace(regex, value);
  }

  function getIncludedResource(type, id, includedData) {
    var attributes;
    includedData.forEach(function(resource) {
      if (resource.type === type && resource.id === id) {
        attributes = resource.attributes;
      }
    });
    return attributes;
  }

  function getCompanyName(includedData, id) {
    return getIncludedResource('companies', id, includedData);
  }

  function getCategoryName(includedData, id) {
    return getIncludedResource('categories', id, includedData);
  }

  function getHourlyPayValue(includedData, id) {
    return getIncludedResource('hourly_pays', id, includedData);
  }

  function relationId(type, data) {
    return data.relationships[type].data.id;
  }

  function formatJobTemplate(template, jobData, includedData) {
    var innerHTML = '';
    var jobAtrs = jobData.attributes;
    var jobID = jobData.id;

    var companyId = relationId('company', jobData);
    var categoryId = relationId('category', jobData);
    var hourlyPayId = relationId('hourly_pay', jobData);

    var company = getCompanyName(includedData, companyId);
    var category = getCategoryName(includedData, categoryId);
    var hourlyPay = getHourlyPayValue(includedData, hourlyPayId);
    var grossSalary = hourlyPay['gross_salary_with_unit'];

    var hours = jobAtrs.hours;
    var amount = jobAtrs['gross_amount_delimited'];
    var maxDescriptionLength = 100;
    var shortDesc = jobAtrs['translated_text']['short_description'] || jobAtrs['short_description'];
    var description = shortDesc || (jobAtrs['translated_text']['description'] || jobAtrs['description']);
    var name = jobAtrs['translated_text'].name || jobAtrs.name;
    description = truncate(description, maxDescriptionLength);

    innerHTML = formatTemplate(template, '%job_id%', jobID);
    innerHTML = formatTemplate(innerHTML, '%job_company%', company.name);
    innerHTML = formatTemplate(innerHTML, '%job_city%', company.city);
    innerHTML = formatTemplate(innerHTML, '%job_category%', category.name);
    innerHTML = formatTemplate(innerHTML, '%job_name%', name);
    innerHTML = formatTemplate(innerHTML, '%job_amount%', amount);
    innerHTML = formatTemplate(innerHTML, '%job_hours%', hours);
    innerHTML = formatTemplate(innerHTML, '%job_hourly_pay%', grossSalary);
    return formatTemplate(innerHTML, '%job_description%', description);
  }

  function truncate(text) {
    var truncationLength = 90;
    var truncatedText = text.substring(0, truncationLength) + '...';
    return truncatedText;
  }

  function createCards(targetSelector, templateSelector) {
    var $target = $(targetSelector);
    var $template = $(templateSelector);

    if ($target.length === 0 || $template.length === 0) {
      return;
    }

    var template = $template.html().toString();
    var html = '';

    getJobs(function(jobsData, includedData) {
      jobsData.forEach(function(jobData) {
        var jobId = jobData.id;
        html += formatJobTemplate(template, jobData, includedData, jobId);
      });

      $target.append(html);
    });
  }

  window.JAJobs = {
    createCards: createCards
  };
})(window);

@@ -77,17 +77,8 @@
 any,
-category,
 hour
@@ -199,11 +199,8 @@
 s;%0A 
- //
  var
@@ -375,16 +375,441 @@
 b_date';
+%0A  var fieldsParam = %5B%0A    'fields' + encodeURIComponent('%5B') + 'company' + encodeURIComponent('%5D') + '=id,name,city',%0A    'fields' + encodeURIComponent('%5B') + 'jobs' + encodeURIComponent('%5D') + '=company,hourly_pay,id,name,city,short_description,description,translated_text,gross_amount_delimited',%0A    'fields' + encodeURIComponent('%5B') + 'hourly_pay' + encodeURIComponent('%5D') + '=id,gross_salary_with_unit'%0A  %5D.join('&');
 %0A%0A  var 
@@ -925,16 +925,30 @@
 ortParam
+ + fieldsParam
 ;%0A%0A  fun
@@ -2552,62 +2552,8 @@
 a);%0A
-    var categoryId = relationId('category', jobData);%0A
     
@@ -2669,70 +2669,8 @@
 d);%0A
-    var category = getCategoryName(includedData, categoryId);%0A
     
@@ -3455,84 +3455,8 @@
 y);%0A
-    innerHTML = formatTemplate(innerHTML, '%25job_category%25', category.name);%0A
     

Optimize jobs API request to only include needed data