Getting object key by 'indexof' value of dropdown

JavaScript
1

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>
2

Is there any reason you are wrapping the object in an array? You only have one object so there shouldnt be any need to use an array.

"Brand1-Parameter1-SubBrand2": [{
  "Image": "animal",
  "Heading": "SubBrand2",
  "Link": "SubBrand2"
}],

I didnt test anything but this could be your issue. You would need to access it by

Brand1-Parameter1-SubBrand2[0].Heading

not

Brand1-Parameter1-SubBrand2.Heading

Just in case this could be the issue.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.