Filtering data from HubDB using Checkboxes

[FredSan]

Hi Developers,

I have really been working on trying to find a solution to filter my HubDB data by using checkboxes.  I am trying to learn HubL so I wanted to try to find a way to do this using pure HubL, but in all the posts I have read it seems the best suggestions say to pull the data in and filter it with JQuery.  So, now I am stuck and hope there is someone who can help explain my next steps.   (I am just very rough with the syntax)

I began by pulling the checkbox options in from two different columns in HubDB. 

<div class="resources-wrap">
<h3>Available Resources</h3>
   <div class="subject-wrap">
<form>         
<h3>Filter Resources by Subject</h3>
{# Loop the checkbox options for the subject_en column #}
        {% set types = hubdb_table_column(1234567, "subject_en").options %}
        {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
            <input type="checkbox" id="{{choice.name}}" name="re-subject2" value="{{choice.name|lower}}">
        <label for="{{choice.name}}">  {{choice.name}}</label><br>
        {% endfor %}
       </form>
       </div>

<div class="type-wrap">
      <form>          
       <h3>Filter by Type</h3>
{# Loop the checkbox options for the type_en column #}
        {% set types = hubdb_table_column(1234567, "type_en").options %}
        {% for choice in types %}
          {% set type_list = type_list~choice.id|list %}
            <input type="checkbox" id="{{choice.name}}" name="re-type" value="{{choice.name|lower}}">
            <label for="{{choice.name}}">  {{choice.name}}</label><br>
        {% endfor %}
       </form>
       </div>
    <br>
<hr>

 Next I hand coded the results to filter (This is where I need help)

I want to loop through the columns and get a list of available data-categories (see how data category shows all the row values by name)

example: data-category="articles arts language la-english africa">

Q: How can I get this list of categories from multiple columns and put them in the data-category value?

<div class="resources">
  <div class="resource" data-id="resource-card-1" data-category="articles arts language la-english africa">Resource Card 1</div>
  <div class="resource" data-id="resource-card-2" data-category="blogposts geography literature culture africa la-french europe">Resource Card 2</div>
  <div class="resource" data-id="resource-card-3" data-category="lessonplans geography spanish africa europe asia">Resource Card 3</div>
  <div class="resource" data-id="resource-card-4" data-category="maps geography arts la-english europe">Resource Card 4</div>
  <div class="resource" data-id="resource-card-5" data-category="podcasts geography stem la-french asia">Resource Card 5</div>
  <div class="resource" data-id="resource-card-6" data-category="quizzes culture asia">Resource Card 6</div>
  <div class="resource" data-id="resource-card-7" data-category="tools geography language explore-the-city australia">Resource Card 7</div>
  <div class="resource" data-id="resource-card-8" data-category="videos arts la-french geography north-america">Resource Card 8</div>
  <div class="resource" data-id="resource-card-9" data-category="viralvisits history literature la-french french north-america">Resource Card 9</div>
  <div class="resource" data-id="resource-card-10" data-category="workshops arts la-french north-america">Resource Card 10</div>
  <div class="resource" data-id="resource-card-11" data-category="maps arts spanish la-english north-america">Resource Card 11</div>
  <div class="resource" data-id="resource-card-12" data-category="articles french stem la-english south-america">Resource Card 12</div>
  <div class="resource" data-id="resource-card-13" data-category="tools explore-the-city la-french south-america">Resource Card 13</div>
  <div class="resource" data-id="resource-card-14" data-category="videos geography la-french antarctica">Resource Card 14</div>
</div>

 And finally, Here is the JQuery code that I have used to show and hide the Resource Cards.

var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
  var selectedFilters = {};
  $filterCheckboxes.filter(':checked').each(function() {
    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
    }
    selectedFilters[this.name].push(this.value);
  });
  // create a collection containing all of the filterable elements
  var $filteredResults = $('.resource');
  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {
    // filter each .resource element
    $filteredResults = $filteredResults.filter(function() {
      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');
      // loop over each category value in the current .resource's data-category
      $.each(currentFilterValues, function(_, currentFilterValue) {
        // if the current category exists in the selected filters array
        // set matched to true, and stop looping. as we're ORing in each
        // set of filters, we only need to match once
        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });
      // if matched is true the current .resource element is returned
      return matched;
    });
  });
  $('.resource').hide().filter($filteredResults).show();
});

//thanks to billyonecan for this code at fiddle http://jsfiddle.net/n3EmN/171/

I feel I am so close to getting this to work.  If you could kindly help me over this hurdle, or help guide me it would be greaty appreciated.

[Kevin-C]

Anytime!

This was a great project to learn HubL!

Keep it up and I'll bet you unearth a few tricks that you can use in the future!

[Kevin-C]

Hey @FredSan 

Within the loop you should be able to just combine the values like so:

data-category="{{ colOneValue }} {{ colTwoValue }}"

[FredSan]

Yes, @Kevin-C 

That's exactly what I am trying to do, and that is where I am having some problems. 

I am wondering where I can get these variables and add them dynamically from the column-row?

I've tried looping through multiple columns to get the values.  Right now I can get them to print out using a for loop, but I cant concatinate them together into a variable {{colOneValue}}, as you mentioned. 

- Here is my looping code to pull a list of multi-select items being used by each row.

    {% set table = hubdb_table_rows(1234567) %}  
       {% for row in table %}  
{# loop over column type_en and display selected items in this row #}
        {% for tag in row.type_en %}
           {{ tag.name|lower }}
             {% if !loop.last %} {% endif %}
        {% endfor %}
{# loop over column subject_en and display selected items in this row #}
        {% for tag in row.subject_en %}
           {{ tag.name|lower }}
             {% if !loop.last %} {% endif %}
         {% endfor %}
{# loop over column destination_en and display selected items in this row #}
        {% for tag in row.destination_en %}
           {{ tag.name|lower }}
             {% if !loop.last %} {% endif %}
        {% endfor %}<br> 
       {% endfor %}
     

my output shows 6 rows (I only have 6 rows in my DB)

If I could only grab this first line of text and add it into a variable named {{cardValue}} or some name.

(I will also need to find a way to remove the space from values like "blog posts" but thats another topic.)

I have also tried to set an array {% set subject_data = [] %}  and append the looped tag names into the array by adding a {% do subject_data.append ('{{tag.name}} ')%}, but I haven't been successful there either.

Here's my attempt (which didn't work)

{% set table = hubdb_table_rows(1234567) %}
{% set subject_data = [] %}    
       {% for row in table %}
          {% for tag in row.subject_en %}
          {{ tag.name }}
       {% do subject_data.append('{{ tag.name }} ') %}
          {% if !loop.last %}{% endif %}
          {% endfor %}                 
       {% endfor %}

 I feel that I am getting close, (hopefully not overthinking this) so if you have any more suggestions, I am all ears.  

[Kevin-C · Accepted solution]

Hey @FredSan 

You might be over thinking it. But to be sure let me aska few questions:

1) When looping through the rows, what is the purpose on combining the values into a single variable.

If the purpose is just to print the value you could just nest the loop in the html:

<div class="resources">
	{% for row in table %} 
		<div class="resource"
				 data-id="resource-card-1"
				 data-category='
										{% for tag in row.type_en %}
												{{ tag.name|replace(" ","-")|lower }}
										{% endfor %}
										{# loop over column subject_en and display selected items in this row #}
										{% for tag in row.subject_en %}
										  {{ tag.name|replace(" ","-")|lower }}
										{% endfor %}
										{# loop over column destination_en and display selected items in this row #}
										{% for tag in row.destination_en %}
										  {{ tag.name|replace(" ","-")|lower }}
										{% endfor %}'
				            {# loop over column type_en and display selected items in this row #}
		>Resource Card 1</div> 
{% endfor %}

[FredSan]

Hi @Kevin-C , This is precicely what I needed to do.  You are right, I was overthinking it. It all seems so clear now.  Also, I see what you did there with the |replace(" ","-")  filter.  Brilliant!! , so thank you!!!