Updating href and src with JSON in Jqeury [closed]

Issue

This Content is from Stack Overflow. Question asked by Saaif Al-Asad

$( 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() {
            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', currentColor.producturl);
            $('.js-color-image').attr('src', currColor.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>

I am trying to create 2 separate dropdowns with Json that are clothing types and colors.

Once a user clicks on the clothing type, available colours will be appended to the second dropdown via JSON, which is working well.

However upon clicking on a colour from the second dropdown I am trying to update the href and and src with Jquery and not being able to get the JSON values.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?