JSFiddle - React, Tailwind, and code Playground

Sector-based jobs list

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.3.1/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
window.successesData = {
  "clients": [{
    "name": "Tidal",
    "thumbnail": "/wp-content/uploads/2017/10/tidal_featured_image.jpg",
    "backgroundSize": "110%",
    "jobs": [{
      "name": "Senior Vice President Marketing",
      "type": ["Marketing"]
    }, {
      "name": "Vice President Data Analytics",
      "type": ["Technology"]
    }, {
      "name": "Vice President Growth",
      "type": ["Marketing"]
    }, {
      "name": "Vice President CRM",
      "type": ["Technology"]
    }, {
      "name": "Creative Director",
      "type": ["Marketing", "Product"]
    }],
    "classes": ["type-Marketing", "type-Technology", "type-Product"]
  }, {
    "name": "Newsela",
    "thumbnail": "/wp-content/uploads/2018/10/newsela_featured_image.jpg",
    "backgroundSize": "105%",
    "jobs": [{
      "name": "Chief Marketing Officer",
      "type": ["Marketing"]
    }],
    "classes": ["type-Marketing"]
  }, {
    "name": "FreeWheel",
    "thumbnail": "/wp-content/uploads/2016/04/freewheel_featured_image.jpg",
    "backgroundSize": "100%",
    "jobs": [{
      "name": "Chief Revenue Officer",
      "type": ["Sales"]
    }, {
      "name": "Chief Product Officer",
      "type": ["Product"]
    }, {
      "name": "SVP, Engineering",
      "type": ["Technology"]
    }, {
      "name": "SVP, Advisory Services",
      "type": ["Sales"]
    }, {
      "name": "VP, Demand Sales",
      "type": ["Sales"]
    }, {
      "name": "VP, Brand Marketing",
      "type": ["Marketing"]
    }],
    "classes": ["type-Sales", "type-Product", "type-Technology", "type-Marketing"]
  }, {
    "name": "WeWork",
    "thumbnail": "/wp-content/uploads/2014/02/weworklogo-.png",
   ...

JavaScript

// 1. Go to https://alistsearch.net/successes/
// 2. Open Developer Tools > Console
// 3. Copy this block of code, paste it into the browser console and press Enter to run the code
// 4. Start using the filter tabs on the Successes page. Every time you use a filter, a bullet list should appear at the bottom of the page

$(document).on('click', '.success-filters [data-filter]', function () {
	var filter = $(this).data('filter');
  var sector;
  var filteredClients;
  var html = [];

	if (filter.indexOf('.type-') === 0) {
  	sector = filter.substr(6);
  }
  
  filteredClients = _.cloneDeep(successesData.clients);

	if (sector) {
    filteredClients = _.filter(filteredClients, function (client) {
      _.remove(client.jobs, function (job) {
        return job.type.indexOf(sector) === -1
      });
      return client.jobs.length;
    });
  }

  _.forEach(filteredClients, function (client) {
    html.push('<p>' + client.name + '</p>');
    html.push('<ul>');
    _.forEach(client.jobs, function (job) {
      html.push('<li>' + job.name + '</li>');
    });
    html.push('</ul>');
  });
  
  if (!$('#output').length) {
  	$('body').append('<div id="output"></div>');
  }
  
  $('#output').html(html.join(''));
});