Getting a dependent multi-select to display data from a JSON Array nested within the JQuery

jquery

#1

I’m trying to create a comparison table dependent on the options selected in 2 questions where the 2nd questions options are dependent on the 1st one. The data to be displayed after selecting the options resides in the JSON array within my JQuery. While the JQuery was working well independently without the dependent questions, it doesn’t show the data now.

Where am I going wrong?

The below picture is the output that I need where the comparison table is populated basis the selection made in the above questions.

Output%20Data%20(11Mar19)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<style>  
.opt {
  margin: 10px;
  background: #eee;
  border: 1px solid #222;
}
.opt td {
  border: 1px solid #bbb;
  padding: 10px;
}
</style>
</head>
<body>
Options:
<select name="selection1" select class="js-example-basic-single" id="selection1">
    <option name="Fruit" value="Fruit">Fruit</option>  
    <option name="Animal" value="Animal">Animal</option>
    <option name="Bird" value="Bird">Bird</option>
    <option name="Car" value="Car">Car</option>
</select> 

<select name="selection2" select class="js-example-basic-multiple" id="selection2" multiple="multiple">
    Options:
    <option name="Fruit" value="Fruit">Banana</option>
    <option name="Fruit" value="Fruit">Apple</option>
    <option name="Fruit" value="Fruit">Orange</option>
    <option name="Animal" value="Animal">Wolf</option>
    <option name="Animal" value="Animal">Fox</option>
    <option name="Animal" value="Animal">Bear</option>
    <option name="Bird" value="Bird">Eagle</option>
    <option name="Bird" value="Bird">Hawk</option>
    <option name="Car" value="Car">BMW</option>
    <br /><br />
    <input id="btnSubmit" type="submit" value="submit"/>
</select>
    <br /><br />
    <div id="divResult"></div>
</body>

<script>

jQuery(document).ready(function($) {
    jQuery('.js-example-basic-single').select2();
    jQuery('.js-example-basic-multiple').select2();
});

var $selection1 = $('#selection1'),
    $selection2 = $('#selection2'),
    $options = $selection2.find('option');
    
    $selection1.on( 'change', function() {
    $selection2.html( $options.filter('[value="' + this.value + '"]'));
} ).trigger('change');

var StatJSON = {
  "Banana": {
    "Name": "Banana",
    "Parameter1": "65",
    "Parameter2": "30"
  },
  "Apple": {
    "Name": "Apple",
    "Parameter1": "62",
    "Parameter2": "40"
  },
  "Orange": {
    "Name": "Orange",
    "Parameter1": "65",
    "Parameter2": "90"
  },
  "Wolf": {
    "Name": "Wolf",
    "Parameter1": "62",
    "Parameter2": "87"
  },
  "Fox": {
    "Name": "Fox",
    "Parameter1": "57",
    "Parameter2": "43"
  },
  "Bear": {
    "Name": "Bear",
    "Parameter1": "30",
    "Parameter2": "60"
  },
  "Eagle": {
    "Name": "Eagle",
    "Parameter1": "21",
    "Parameter2": "25"
  },
  "Hawk": {
    "Name": "Hawk",
    "Parameter1": "33",
    "Parameter2": "45"
  },
  "BMW": {
    "Name": "BMW",
    "Parameter1": "101",
    "Parameter2": "80"
  }
};

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery('.selection2').find(':selected').each(function(e) {
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));
});

function PrintTable(data) {
  var html = '<table class="opt"><tr><td>';
  if (data && data.length) {
    html += '</td>';
    jQuery.each(data, function(k, v) {
      html += '<td>' + v + '</td>';
    });
    html += '</tr>';
    jQuery.each(StatJSON[data[0]], function(k, v) {
      html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
        html += '<td>' + StatJSON[data[k2]][k] + '</td>';
      });
      html += '</tr>';
    });
  } else { html += 'No results found</td></tr>'; }
  html += '</table>';
  return html;
}
</script>
</html>

#2

The problem seems to be in the code that gathers the selected items into the data[] array. Sadly I don’t know enough JS to go further than that. If I modify your code

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery('#selection2').find(':selected').each(function(e) {
 console.log("E" + e);
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
	 console.log("V " + this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));
});

to select against #selection2 rather than .selection2 it runs through the loop, but each time it is adding “Fruit” to the array, not your second parameter.