Getting object key by 'indexof' value of dropdown

Question

I have 2 dropdowns, one which allows you to select the 'Brand' and 2nd which allows you to select the 'parameter' to get to the respective 'SubBrands' within the 'Brand' selected.

My Array:

var Brand = { "Brand1-Parameter1-SubBrand1": [{"Image": "animal", "Heading": "SubBrand1", "Link": "SubBrand1"}], 
                "Brand1-Parameter1-SubBrand2": [{ "Image": "animal", "Heading": "SubBrand2", "Link": "SubBrand2"}], 
                "Brand1-Parameter2-SubBrand3": [{ "Image": "water", "Heading": "SubBrand3", "Link": "SubBrand3" }], 
                "Brand1-Parameter2-SubBrand4": [{ "Image": "water", "Heading": "SubBrand4", "Link": "SubBrand4" }], 
                "Brand2-Parameter1-SubBrand5": [{ "Image": "travel", "Heading": "SubBrand5", "Link": "SubBrand5" }], 
                "Brand2-Parameter1-SubBrand6": [{ "Image": "travel", "Heading": "SubBrand6", "Link": "SubBrand6" }], 
                "Brand2-Parameter2-SubBrand7": [{ "Image": "flower", "Heading": "SubBrand7", "Link": "SubBrand7" }], 
                "Brand2-Parameter2-SubBrand8": [{ "Image": "flower", "Heading": "SubBrand8", "Link": "SubBrand8" }], 
            } 

My first jquery filters the array for the 'Brand' selected in the dropdown, which works:

$("#ParentBrand").on('change', function() {
    var ParentBrandSelected = $('#ParentBrand').val();
    var ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))

The second part of this should filter the keys containing 'Parameters' selected with 'indexOf'.

$("#Parameter").on('change', function() {
        var ParameterSelected = $('#Parameter').val()
        var ParentBrandParameterKeys = ParentBrandKeys.map(key => Object.keys(Brand[key]).filter(v => v.indexOf(ParameterSelected) > -1))

However this second part doesn't work and the console shows an empty array. How do I filter the Object Keys containing the selected parameters?

Find full code below:

jQuery(document).ready(function($) {

  var Brand = {
    "Brand1-Parameter1-SubBrand1": [{
      "Image": "animal",
      "Heading": "SubBrand1",
      "Link": "SubBrand1"
    }],
    "Brand1-Parameter1-SubBrand2": [{
      "Image": "animal",
      "Heading": "SubBrand2",
      "Link": "SubBrand2"
    }],
    "Brand1-Parameter2-SubBrand3": [{
      "Image": "water",
      "Heading": "SubBrand3",
      "Link": "SubBrand3"
    }],
    "Brand1-Parameter2-SubBrand4": [{
      "Image": "water",
      "Heading": "SubBrand4",
      "Link": "SubBrand4"
    }],
    "Brand2-Parameter1-SubBrand5": [{
      "Image": "travel",
      "Heading": "SubBrand5",
      "Link": "SubBrand5"
    }],
    "Brand2-Parameter1-SubBrand6": [{
      "Image": "travel",
      "Heading": "SubBrand6",
      "Link": "SubBrand6"
    }],
    "Brand2-Parameter2-SubBrand7": [{
      "Image": "flower",
      "Heading": "SubBrand7",
      "Link": "SubBrand7"
    }],
    "Brand2-Parameter2-SubBrand8": [{
      "Image": "flower",
      "Heading": "SubBrand8",
      "Link": "SubBrand8"
    }],
  }

  $("#ParentBrand").on('change', function() {
    var ParentBrandSelected = $('#ParentBrand').val();
    var ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected, ParentBrandKeys)
    jQuery("#Parameter").val(null).trigger('change');

    $("#Parameter").on('change', function() {
      var ParameterSelected = $('#Parameter').val()
      var ParentBrandParameterKeys = ParentBrandKeys.map(key => Object.keys(Brand[key]).filter(v => v.indexOf(ParameterSelected) > -1))
      console.log(ParentBrandParameterKeys)
    });
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div>Select the Brand:
    <select id="ParentBrand">
      <option></option>
      <option value="Brand1">Brand1</option>
      <option value="Brand2">Brand2</option>
    </select>
  </div>
  <div>Select the Parameter:
    <select id="Parameter">
      <option></option>
      <option value="Parameter1">Parameter1</option>
      <option value="Parameter2">Parameter2</option>
    </select>
  </div>
</div>

Answer 1

You need a boolean result so indexOfisn't the best tool for the job. includes is preferred unless you actually need the index.

Your logic was failing because you were trying to reference the ParentBrandKeys array in your second pulldown - but it was scoped to it's own function, and so empty to your logic.

If you make the 2 values global variables, you can utilize them in each others logic. For example once you select the brand, you can use that as a filter on the parameters. In this, we save the variables outside of the functions and test for them using:

 v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected)

jQuery(document).ready(function($) {

  var Brand = {
    "Brand1-Parameter1-SubBrand1": [{
      "Image": "animal",
      "Heading": "SubBrand1",
      "Link": "SubBrand1"
    }],
    "Brand1-Parameter1-SubBrand2": [{
      "Image": "animal",
      "Heading": "SubBrand2",
      "Link": "SubBrand2"
    }],
    "Brand1-Parameter2-SubBrand3": [{
      "Image": "water",
      "Heading": "SubBrand3",
      "Link": "SubBrand3"
    }],
    "Brand1-Parameter2-SubBrand4": [{
      "Image": "water",
      "Heading": "SubBrand4",
      "Link": "SubBrand4"
    }],
    "Brand2-Parameter1-SubBrand5": [{
      "Image": "travel",
      "Heading": "SubBrand5",
      "Link": "SubBrand5"
    }],
    "Brand2-Parameter1-SubBrand6": [{
      "Image": "travel",
      "Heading": "SubBrand6",
      "Link": "SubBrand6"
    }],
    "Brand2-Parameter2-SubBrand7": [{
      "Image": "flower",
      "Heading": "SubBrand7",
      "Link": "SubBrand7"
    }],
    "Brand2-Parameter2-SubBrand8": [{
      "Image": "flower",
      "Heading": "SubBrand8",
      "Link": "SubBrand8"
    }],
  }

  let ParentBrandSelected = '',
    ParameterSelected = ''
  $("#ParentBrand").on('change', function() {
    ParentBrandSelected = $(this).val();
    let ParentBrandKeys = Object.keys(Brand).filter(v => v.startsWith(ParentBrandSelected))
    console.log(ParentBrandSelected, ParentBrandKeys)
    jQuery("#Parameter").val(null).trigger('change');

    $("#Parameter").on('change', function() {
      ParameterSelected = $(this).val()
      let ParentBrandParameterKeys = Object.keys(Brand).filter(v => v.split("-").includes(ParentBrandSelected) && v.split("-").includes(ParameterSelected))
      console.log(ParentBrandParameterKeys)

      let markup = ''
      jQuery.each(ParentBrandParameterKeys, function(index, value) {
        let useValue = Brand[value][0]
        markup += '<a href="/Directory/SubDirectory/' + useValue.Link + '.html">'
        markup += '<div class="InnerBlock">'
        markup += '<div style="background-image:url(https://source.unsplash.com/1280x720/?' + useValue.Image + ')">' + useValue.Heading + '</div>'
        markup += '</div>'
        markup += '</a>'
      });

      console.log(markup)


    });
  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <div>Select the Brand:
    <select id="ParentBrand">
      <option></option>
      <option value="Brand1">Brand1</option>
      <option value="Brand2">Brand2</option>
    </select>
  </div>
  <div>Select the Parameter:
    <select id="Parameter">
      <option></option>
      <option value="Parameter1">Parameter1</option>
      <option value="Parameter2">Parameter2</option>
    </select>
  </div>
</div>