Get value from specific JSON object based on first selection

Question

I have a set of dropdowns which I will be populating with JSON. What I would like to do is populate the first dropdown with the name of each object. Then when someone selects an option from the first dropdown, the second dropdown is populated with other data pertaining to their first selection. What I have right now is populating the first select box with the name of a product and assigning the value to the ID For the second dropdown I want the options to be based on the options associated with the product that was selected in the first dropdown, based on ID.

Here's what I have so far, I am not sure how to only get the data from the selected product based on the products ID:

 $(function() { var products = [{ "id": 0, "name": "First Product", "sizes": [{ "size": "small" },{ "size": "medium" }] }, { "id": 1, "name": "Second Product", "sizes": [{ "size": "small" },{ "size": "medium" }] } ] $.each(products, function(key, val) { $('.first').append('<option value="' + val.id + '">' + val.name + '</option>'); }); $('.first').change(function() { var selectedProduct = $(this).val(); $.each(products['id'][selectedProduct], function(key, val) { $('second').append('<option id="' + val.sizes.size + '">' + val.sizes.size + '</option>'); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="first"> </select> <select class="second"> </select> 

Answer 1

You just need to iterate over products again to find the one with the currently selected ID. Then, iterate over its sizes and fill the second just like you did with the first.

Clear the options each time.

And, trigger a 'change' at the start to get the second's filled to begin with.

$(function() {
  var products = [{
        "id": 0,
        "name": "First Product",
        "sizes": [{
          "size": "small"
        },{
          "size": "medium"
        }]
      },
      {
        "id": 1,
        "name": "Second Product",
        "sizes": [{
          "size": "med"
        },{
          "size": "large"
      }]
    }
  ]

    $.each(products, function(key, val) {
      $('.first').append('<option value="' + val.id + '">' + val.name + '</option>');
    });

    $('.first').change(function() {
      var selectedProduct = $(this).val();
      $.each(products, function(key, val) {
          if (val.id==selectedProduct) {
              $('.second').find('option').remove();
              $.each(val.sizes, function(key2, val2) {
                  $('.second').append('<option value="' + val2.size + '">' + val2.size + '</option>');
              });
          }
      });
    });

    $('.first').trigger('change');
});

Answer 2

You could stick the object on the option as a data field for reference.

 $(function() { var products = [{ "id": 0, "name": "First Product", "sizes": [{ "size": "small" },{ "size": "medium" }] }, { "id": 1, "name": "Second Product", "sizes": [{ "size": "small" },{ "size": "medium" }] } ] $.each(products, function(key, val) { var $option = $('<option>').val(val.id).text(val.name).data('object-reference', val); $('.first').append($option); }); $('.first').change(function() { var selectedProduct = $(this).find('option:selected'); $.each(selectedProduct.data('object-reference').sizes, function(key, val) { $('.second').append('<option id="' + val.size + '">' + val.size + '</option>'); }); }); setTimeout(function(){ products[1].sizes = [ { 'size': 'changed1' }, { 'size': 'changed2' } ]; }, 2000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="first"> </select> <select class="second"> </select> 

Answer 3

$(function() {
    var products = [{
        "id": 0,
        "name": "First Product",
        "sizes": [{
            "size": "small"
        },{
            "size": "medium"
        }]
    }, {
        "id": 1,
        "name": "Second Product",
        "sizes": [{
            "size": "small"
        },{
            "size": "medium"
        }]
    }]

    $.each(products, function(key, val) {
        $('.first').append('<option value="' + val.id + '">' + val.name + '</option>');
    });

    $('.first').change(function() {
        var selectedProduct = $(this).val();

        var getProduct = products.filter(function( obj ) {
            return obj.id == selectedProduct;
        });
        $('.second').find('option').remove();
        $.each(getProduct[0].sizes, function(key, val) {
               $('.second').append('<option id="' + val.size + '">' + val.size + '</option>');
             });
    });
});