JQuery/JS filter system for JSON

I'm been picking apart peoples code to learn how to use JSON/JQ but I'm having some issues with why something won't work.

https://codepen.io/bbbradleyyy/pen/JexPmw

Here is the project (JS is below). I have it so the JSON from a Google Spreadsheet is showing up and styled but when i try to run the filtering system it doesn't work.

I'm still somewhat new to this type of coding and would love if someone could help me out. Please and thank you!

var options = {
  valueNames: [ 'name', 'description', 'category' ]
};

var featureList = new List('lovely-things-list', options);

$('#filter-games').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Game") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});

$('#filter-beverages').click(function() {
  featureList.filter(function(item) {
    if (item.values().category == "Beverage") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});
$('#filter-none').click(function() {
  featureList.filter();
  return false;
});


var jsonSource = "https://spreadsheets.google.com/feeds/list/1cDoIo8QG2k4pzBC_Mx5k7CCi_rZRlEsZAOSb8QY00vk/od6/public/values?alt=json"

  //fetch the json feed
  $.getJSON( jsonSource, function() {
    $("<p>json request successful</p>").prependTo("#container");
  })

  .done(function(data) { 
    if (data.feed.entry.length > 0) {
      $.each( data.feed.entry, function( i, item ) {
        var $name = item.gsx$name.$t;
        var $info = item.gsx$info.$t;
        var $dataquick = item.gsx$dataquick.$t;
        var $datadrink = item.gsx$datadrink.$t;
        var $datahappy = item.gsx$datahappy.$t;
        var $hours = item.gsx$hours.$t;
        var $happyhour = item.gsx$happyhour.$t;
        var $x = item.gsx$x.$t;
        var $y = item.gsx$y.$t;
        var $img = item.gsx$img.$t;
        var $happyhourlist;
        if ($datahappy == "FALSE") {
          $happyhourlist = "";
        } else {
          $happyhourlist = '<div class="row justify-content-sm-center"><div class="col-md-12 cells"><h3>happy hours</h3>' + $happyhour + '</div></div>';
        };
          $('<li><img src="' + $img +'" class="thumb" style="width: 50px;height:auto;" /><h4><span class="name">TITLE</span> <span class="category">Game</span></h4><p class="description">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p></li>').appendTo(".list");
      });      
    } else {
      // if the json request is successful but there are no items
      $("<p>JSON request succeeded but no data returned.</p>").prependTo("#container");
    }
  })

  .fail(function() {
    $("<p>JSON request fail</p>").prependTo("#container");
  })

  .error(function() {
    $("<p>JSON request error</p>").prependTo("#container");
  });