How to implement two-level filtering data from an array?

Question

I am working on the following code. How can I update/ Filter the groups list based on First, Radio selection and then by checkbox selections?

As you can see I am able to filter the list by radios (Not sure how to make the code even shorter instead of using 3 if clauses?) but I do not know how to run second part (checkboxes) specifically some of them are not available for the radios

var groups = [
  ['Asia', 'G1', 1, 'ASG1'],
  ['Asia', 'G1', 1, 'ASG2'],
  ['Asia', 'G2', 0, 'ASG3'],
  ['Asia', 'G1', 1, 'ASG4'],
  ['Asia', 'G3', 0, 'ASG5'],
  ['Asia', 'G3', 1, 'ASG6'],
  ['Asia', 'G5', 1, 'ASG7'],
  ['Asia', 'G5', 1, 'ASG8'],
  ['Africa', 'G1', 1, 'AFG1'],
  ['Africa', 'G1', 1, 'AFG2'],
  ['Africa', 'G2', 0, 'AFG3'],
  ['Africa', 'G3', 0, 'AFG4'],
  ['Africa', 'G2', 1, 'AFG5'],
  ['Africa', 'G2', 1, 'AFG6'],
  ['Africa', 'G3', 1, 'AFG7'],
  ['Africa', 'G2', 1, 'AFG8'],
  ['Africa', 'G6', 1, 'AFG9'],
  ['Africa', 'G6', 1, 'AFG10'],
  ['America', 'G1', 1, 'AMG1'],
  ['America', 'G1', 1, 'AMG2'],
  ['America', 'G1', 1, 'AMG3'],
  ['America', 'G2', 0, 'AMG4'],
  ['America', 'G2', 1, 'AMG5'],
  ['America', 'G2', 0, 'AMG6'],
  ['America', 'G3', 0, 'AMG7'],
  ['America', 'G3', 1, 'AMG8'],
  ['America', 'G3', 0, 'AMG9'],
  ['America', 'G3', 1, 'AMG10'],
  ['America', 'G8', 1, 'AMG11'],
  ['America', 'G8', 0, 'AMG12'],
  ['America', 'G8', 1, 'AMG13']
];

$('input[type=radio][name=options]').change(function() {
        if (this.value == 'Asia') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'Asia') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
        if (this.value == 'Africa') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'Africa') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
         else if (this.value == 'America') {
        for (i = 0; i < groups.length; i++) { 
         if (groups[i][0] == 'America') {
           $('ul').append('<li>'+groups[i][3]+'</li>');
           }
          }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="radio" name="options" value="Asia" />Asia</label>
  <label><input type="radio" name="options" value="Africa" />Africa</label>
  <label><input type="radio" name="options" value="America" />America</label>

</div>

<div class="multiselect">
  <label><input type="checkbox" name="gp" value="G1" />G 1</label>
  <label><input type="checkbox" name="gp" value="G2" />G 2</label>
  <label><input type="checkbox" name="gp" value="G3" />G 3</label>
  <label><input type="checkbox" name="gp" value="G4" />G 4</label>
  <label><input type="checkbox" name="gp" value="G5" />G 5</label>
  <label><input type="checkbox" name="gp" value="G6" />G 6</label>
  <label><input type="checkbox" name="gp" value="G8" />G 8</label>
</div>

<ul>
  
</ul>

so when you click on check-box what you want?You question is unclear on this point. So please clarify — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 10, 2018 at 6:08
well I thought the Checboxes labels give the idea of filtering the data to only display those Foe example if sombody select G 1 only the g1 will display and so on — Mona Coder
– Mona Coder, Commented Mar 10, 2018 at 6:13
So if asia and g1 is selected then only one record ASG1 need to be shown? Am i right? — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 10, 2018 at 6:15
No, All Asia records with G1 not ASG1 as ['Asia', 'G1', ..], — Mona Coder
– Mona Coder, Commented Mar 10, 2018 at 6:18

Hassan Imam · Accepted Answer · 2018-03-10 06:46:32Z

You can filter first on continents name. Then using the filtered array you can filtered based on groups by first storing all the groups in an array and then filtering the continent with respect to this group. Then generate the list.

var groups = [
  ['Asia', 'G1', 1, 'ASG1'],
  ['Asia', 'G1', 1, 'ASG2'],
  ['Asia', 'G2', 0, 'ASG3'],
  ['Asia', 'G1', 1, 'ASG4'],
  ['Asia', 'G3', 0, 'ASG5'],
  ['Asia', 'G3', 1, 'ASG6'],
  ['Asia', 'G5', 1, 'ASG7'],
  ['Asia', 'G5', 1, 'ASG8'],
  ['Africa', 'G1', 1, 'AFG1'],
  ['Africa', 'G1', 1, 'AFG2'],
  ['Africa', 'G2', 0, 'AFG3'],
  ['Africa', 'G3', 0, 'AFG4'],
  ['Africa', 'G2', 1, 'AFG5'],
  ['Africa', 'G2', 1, 'AFG6'],
  ['Africa', 'G3', 1, 'AFG7'],
  ['Africa', 'G2', 1, 'AFG8'],
  ['Africa', 'G6', 1, 'AFG9'],
  ['Africa', 'G6', 1, 'AFG10'],
  ['America', 'G1', 1, 'AMG1'],
  ['America', 'G1', 1, 'AMG2'],
  ['America', 'G1', 1, 'AMG3'],
  ['America', 'G2', 0, 'AMG4'],
  ['America', 'G2', 1, 'AMG5'],
  ['America', 'G2', 0, 'AMG6'],
  ['America', 'G3', 0, 'AMG7'],
  ['America', 'G3', 1, 'AMG8'],
  ['America', 'G3', 0, 'AMG9'],
  ['America', 'G3', 1, 'AMG10'],
  ['America', 'G8', 1, 'AMG11'],
  ['America', 'G8', 0, 'AMG12'],
  ['America', 'G8', 1, 'AMG13']
];

var continents = [];

$('input[type=radio][name=options]').change(function() {
  continents = groups.filter(a => a[0] === this.value) 
  var str = continents.map(a => `<li>${a[3]}</li>`).join('');
  $('ul').empty();
  $('ul').append(str);
  var unique = [...new Set(continents.map(a => a[1]))];
  
  $(".multiselect input[type=checkbox]").each(function(){
    $(this).attr('disabled', false);
    if(!unique.includes($(this).val())) {
      $(this).attr('disabled', true);
    }
  });
});

$(".multiselect input[type=checkbox]").on("change", function () {
  var groups = [];
  $(this).parent().parent().find('input[type=checkbox]').each(function(){
    if($(this).is(":checked")) {
      groups.push($(this).val());
    }
   });
  
  if(Array.isArray(continents) && continents.length) {
    var filteredGroup = continents.filter( a => groups.includes(a[1]));
    var str = filteredGroup.map(a => `<li>${a[3]}</li>`).join('');
    $('ul').empty();
    $('ul').append(str); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiselect">
  <label><input type="radio" name="options" value="Asia" />Asia</label>
  <label><input type="radio" name="options" value="Africa" />Africa</label>
  <label><input type="radio" name="options" value="America" />America</label>

</div>

<div class="multiselect">
  <label><input type="checkbox" name="gp" value="G1" />G 1</label>
  <label><input type="checkbox" name="gp" value="G2" />G 2</label>
  <label><input type="checkbox" name="gp" value="G3" />G 3</label>
  <label><input type="checkbox" name="gp" value="G4" />G 4</label>
  <label><input type="checkbox" name="gp" value="G5" />G 5</label>
  <label><input type="checkbox" name="gp" value="G6" />G 6</label>
  <label><input type="checkbox" name="gp" value="G8" />G 8</label>
</div>

<ul>
  
</ul>

Thanks Hassan, but is there any way to disable the checkboxes which are not in that radio? For example Ameica doesnt have G6 can we disable thoses checkbox by checking the array
Thanks a lots there is only one minor issue on disabling and Enabling checkboxes on changing the radio. It is working fine on disabaling but when change the radio they are still disabled

Collectives™ on Stack Overflow

How to implement two-level filtering data from an array?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related