Get dynamic values from JSON for Drop-down list

Question

There is drop down list of subjects and I have hard coded them in IF condition. I'm trying to dynamically get values from JSON to drop-down list ?

   function testMessage(){
       var mysel = $("#sub_select option:selected" ).text()
       console.log(mysel); 
       if($( "#sub_select option:selected" ).text() == "Maths"){
             for (var i = 0; i < data[0].Grades.length; i++) { 
                $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
            } 
        }      
       else if($( "#sub_select option:selected" ).text()=="Chemistry"){
           $('#grade_select option').remove();
            for (var i = 0; i < data[1].Grades.length; i++) { 
                $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
            } 
        }
    }

Please open this Fiddle below:

http://jsfiddle.net/pjxhk10u/

Answer 1

Please add remove on select option grade please check updated on your jsfiddle link http://jsfiddle.net/pjxhk10u/

var data = [{"Grades":["3","2","1","7","6","5","4","9","8","10"],"Subject":"Maths"},{"Grades":["9","10"],"Subject":"Chemistry"}];

    console.log(JSON.stringify(data));

    for (var i = 0; i < data.length; i++) { 
        $('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');  
    }
       $('#sub_select').on('change',testMessage);   

       function testMessage(){
           var mysel = $("#sub_select option:selected" ).text()
           console.log(mysel); 
           if($( "#sub_select option:selected" ).text() == "Maths"){
          $('#grade_select option').remove(); // add this

                 for (var i = 0; i < data[0].Grades.length; i++) { 
                    $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
                } 

            }      
           else if($( "#sub_select option:selected" ).text()=="Chemistry"){
               $('#grade_select option').remove();
                for (var i = 0; i < data[1].Grades.length; i++) { 
                    $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
                } 
            }
        }

     $.each(data, function(i, option) {
            $('#sel').append($('<option/>').attr("value", option.subjectValue).text(option.subjectGrade));
        });
})

Answer 2

I have updated your JSFiddle with the code which will work perfect for you. JSFiddle

$(document).ready(function () { 
    var data = [
     {"Grades":["3","2","1","7","6","5","4","9","8","10"],"Subject":"Maths"},
     {"Grades":["9","10"],"Subject":"Chemistry"}];

  var subGrade = {};
  $.each(data, function(index, value) {
      $.each(value, function(k, v){
          subGrade[value["Subject"]] = value["Grades"];
      })
  })

    for (var i = 0; i < data.length; i++) { 
          $('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');  
    }

    $('#sub_select').on('change',testMessage);  

    function testMessage(){
        var mysel = $("#sub_select" ).val();    
        if (subGrade.hasOwnProperty(mysel)) {
            $('#grade_select option').remove();
            var options = subGrade[mysel];
            for (var i=0; i<options.length; i++) {
                $('#grade_select').append('<option>'+options[i]+'</option>');
            }
        }
    }   
})

Answer 3

You can use find() to get data of the subject and use it to bind it to your drop down:

$(document).ready(function() {

  var data = [{
    "Grades": ["3", "2", "1", "7", "6", "5", "4", "9", "8", "10"],
    "Subject": "Maths"
  }, {
    "Grades": ["9", "10"],
    "Subject": "Chemistry"
  }];

  console.log(JSON.stringify(data));

  for (var i = 0; i < data.length; i++) {
    $('#sub_select').append('<option id=' + data[i].Subject + '>' + data[i].Subject + '</option>');
  }
  $('#sub_select').on('change', testMessage);

  function testMessage() {
    var mysel = $("#sub_select option:selected").text();
    console.log(mysel);
    var dropDownData = data.find(function (element) { return element.Subject == mysel });

    $('#grade_select').append('<option>Grades...</option>');
    if (dropDownData != null) {
      $('#grade_select option').remove();
      for (var i = 0; i < dropDownData.Grades.length; i++) {
        $('#grade_select').append('<option>' + dropDownData.Grades[i] + '</option>');
      }
    }
  }

  $.each(data, function(i, option) {
    $('#sel').append($('<option/>').attr("value", option.subjectValue).text(option.subjectGrade));
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="mongoreport" method='POST'>
  <select id="sub_select" name="selsub" value="subjectValue">
    <option>Subjects...</option>
  </select>
  <br>
  <select id="grade_select" name="selgrade" value="subjectGrade">
    <option>Grades...</option>
  </select>
  <input name="submit" type="submit" value="submit" />
</form>

Answer 4

In order to generalize you need a way to get the x in data[x] besides checking what $("#sub_select option:selected").text() equals. One solution is to add a dataIndex="i" attribute to each option element.

Change

$('#sub_select').append('<option id='+data[i].Subject+'>'+data[i].Subject+'</option>');

to

$('#sub_select').append('<option dataIndex="'+i+'" id='+data[i].Subject+'>'+data[i].Subject+'</option>');

Then we can replace the hard coded if statements with a generalization.

Change

if($( "#sub_select option:selected" ).text() == "Maths"){
  for (var i = 0; i < data[0].Grades.length; i++) { 
    $('#grade_select').append('<option>'+data[0].Grades[i]+'</option>');  
  } 
}      
else if($( "#sub_select option:selected" ).text()=="Chemistry"){
  $('#grade_select option').remove();
  for (var i = 0; i < data[1].Grades.length; i++) { 
    $('#grade_select').append('<option>'+data[1].Grades[i]+'</option>');  
  } 
}

to

const selectedOption = $('#sub_select option:selected');
const dataIndex = selectedOption.attr('dataIndex');
$('#grade_select option').remove();
for (var i = 0; i < data[dataIndex].Grades.length; i++) { 
  $('#grade_select').append('<option>'+data[dataIndex].Grades[i]+'</option>');  
}