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>
2
Answers
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.
Made a few changes to your code, you can’t access a nested object property just from a string value
Removed the
varfromselectedClothingto make it global and you can access it in another functionNow you can use that variable and access a nested object like this
jsonDATA[selectedClothing].colors[currentColor].producturl);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 objectEdit: adding snippets