Why am I not able to select data properties from dropdown values?

Question

I have 2 different dropdowns of Clothing types and colors. Once a type of clothing is picked from the first dropdown, JSON data populate the second dropdown by appending options based on the value of the first dropdown.

Once a value from second dropdown is selected I am trying to update the link href attribute and image source with jQuery and unable to get the value producturl and image links from json.

 $(document).ready(function() { $('.js-clothing-selector').change(function() { var selectedClothing = $(this).val(); console.log('value: ', selectedClothing); $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(jsonDATA[selectedClothing].colors, function(key, value) { console.log('object: ', key, value); $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { var currentColor = $(this).val(); console.log(currentColor); //This is where the issue lies $('.js-color-link').attr('href', jsonDATA[currentColor.value.producturl]); $('.js-color-image').attr('src', currentColor.image); }) }); var jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>

Answer 1

I made several fixes to your data handling, starting with moving a variable outside the function so it was more accessible. This results in a more complete data package being stored. Then some of the property chains were faulty.

There are many ways it could be done.

 let selectedClothing; $(function() { $('.js-clothing-selector').change(function() { selectedClothing = jsonDATA[$(this).val()]; $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(selectedClothing.colors, function(key, value) { $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { const currentColor = $(this).val(); //This is where the issue lies $('.js-color-link').attr('href', selectedClothing.colors[currentColor].producturl); $('.js-color-image').attr('src', currentColor.image); }) }); const jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>

Answer 2

Made a few changes to your code, you can't access a nested object property just from a string value

$(document).ready(function() {
      var jsonDATA = {
        "pants": {
          "colors": {
            "black": {
              "value": "black",
              "image": "https://i.imgur.com/HMcE1OH.jpeg",
              "name": "Black",
              "producturl": "https://google.ca"
            },
            "white": {
              "value": "white",
              "image": "https://i.imgur.com/MVvuxDA.jpeg",
              "name": "White",
              "producturl": "https://gmail.ca"
            },
            "red": {
              "value": "red",
              "image": "https://i.imgur.com/MVvuxDA.jpeg",
              "name": "Red",
              "producturl": "https://yahoo.ca"
            }
          }
        },
        "shirt": {
          "colors": {
            "grey": {
              "value": "grey",
              "image": "https://i.imgur.com/HMcE1OH.jpeg",
              "name": "Grey",
              "producturl": "https://google.ca"
            },
            "blue": {
              "value": "blue",
              "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e",
              "name": "Blue",
              "producturl": "https://gmail.ca"
            }
          }
        },
        "hoodie": {
          "colors": {
            "gold": {
              "value": "gold",
              "image": "https://i.imgur.com/HMcE1OH.jpeg",
              "name": "Gold",
              "producturl": "https://gmail.com"
            },
            "yellow": {
              "value": "yellow",
              "image": "https://i.imgur.com/8bPtWIw.jpeg",
              "name": "Yellow",
              "producturl": "https://gmail.ca"
            },
            "blue": {
              "value": "blue",
              "image": "https://i.imgur.com/MVvuxDA.jpeg",
              "name": "Blue",
              "producturl": "https://gmail.net"
            }
          }
        }
      }

Removed the var from selectedClothing to make it global and you can access it in another function

$('.js-clothing-selector').change(function() {
    selectedClothing = $(this).val();//removed var
    //console.log('value: ', selectedClothing);

    $('.js-colors-selector').html('<option value="none">Select Colour</option>');

    //Populate the second dropdown by appending options based on the first dropdown choice

    $.each(jsonDATA[selectedClothing].colors, function(key, value) {
      //console.log('object: ', key, value);
      $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>');
    });

  })

Now you can use that variable and access a nested object like this jsonDATA[selectedClothing].colors[currentColor].producturl);

$('.js-colors-selector').change(function() {
    var currentColor = $(this).val();
    
    //Fixed
    $('.js-color-link').attr('href', jsonDATA[selectedClothing].colors[currentColor].producturl);
    $('.js-color-image').attr('src', jsonDATA[selectedClothing].colors[currentColor].image);
  })



});

Notice how your variables are inside brackets [] while other properties are not. That's how you can access the values you need from a deeply nested object

Edit: adding snippets

 $(document).ready(function() { var jsonDATA = { "pants": { "colors": { "black": { "value": "black", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Black", "producturl": "https://google.ca" }, "white": { "value": "white", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "White", "producturl": "https://gmail.ca" }, "red": { "value": "red", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Red", "producturl": "https://yahoo.ca" } } }, "shirt": { "colors": { "grey": { "value": "grey", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Grey", "producturl": "https://google.ca" }, "blue": { "value": "blue", "image": "https://s7d9.scene7.com/is/image/Aritzia/fa22-wk5-pants-ugc-e", "name": "Blue", "producturl": "https://gmail.ca" } } }, "hoodie": { "colors": { "gold": { "value": "gold", "image": "https://i.imgur.com/HMcE1OH.jpeg", "name": "Gold", "producturl": "https://gmail.com" }, "yellow": { "value": "yellow", "image": "https://i.imgur.com/8bPtWIw.jpeg", "name": "Yellow", "producturl": "https://gmail.ca" }, "blue": { "value": "blue", "image": "https://i.imgur.com/MVvuxDA.jpeg", "name": "Blue", "producturl": "https://gmail.net" } } } } $('.js-clothing-selector').change(function() { selectedClothing = $(this).val(); //console.log('value: ', selectedClothing); $('.js-colors-selector').html('<option value="none">Select Colour</option>'); //Populate the second dropdown by appending options based on the first dropdown choice $.each(jsonDATA[selectedClothing].colors, function(key, value) { //console.log('object: ', key, value); $('.js-colors-selector').append('<option value="' + value.value + '">' + value.name + '</option>'); }); }) $('.js-colors-selector').change(function() { var currentColor = $(this).val(); //console.log(jsonDATA[selectedClothing].colors[currentColor].image); //console.log(); //Fixed $('.js-color-link').attr('href', jsonDATA[selectedClothing].colors[currentColor].producturl); $('.js-color-image').attr('src', jsonDATA[selectedClothing].colors[currentColor].image); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="flex"> <div class="w-1/2"> <div class="flex"> <div class="w-24"> <select name="clothing" id="clothing" class="js-clothing-selector"> <option selected value="none">Select Clothing Type</option> <option value="hoodie">Hoodie</option> <option value="pants">Pants</option> <option value="shirt">Shirt</option> </select> </div> <div class="w-24"> <select name="colors" id="colors" class="js-colors-selector"> <option selected value="none">Select Colour</option> </select> </div> </div> <div class="js-link-container"> <a href="" class="dib ar-link js-color-link">Buy Item</a> </div> </div> <div class="w-1/2 js-image-container"> <img class="db w-100 js-color-image" src="" alt="" /> </div> </div> </div>