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

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

    <div >
      <div >
        <div >
          <select name="clothing" id="clothing" >
            <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 >
          <select name="colors" id="colors" >
            <option selected value="none">Select Colour</option>
          </select>
        </div>
      </div>
      <div >
        <a href="" >Buy Item</a>
      </div>
    </div>

    <div >
      <img  src="" alt="" />
    </div>

  </div>
</div>

CodePudding user response：

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

    <div >
      <div >
        <div >
          <select name="clothing" id="clothing" >
            <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 >
          <select name="colors" id="colors" >
            <option selected value="none">Select Colour</option>
          </select>
        </div>
      </div>
      <div >
        <a href="" >Buy Item</a>
      </div>
    </div>

    <div >
      <img  src="" alt="" />
    </div>

  </div>
</div>

CodePudding user response：

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

        <div >
            <div >
                <div >
                    <select name="clothing" id="clothing" >
                       <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 >
                    <select name="colors" id="colors" >
                        <option selected value="none">Select Colour</option> 
                    </select>
                </div>
            </div>
            <div >
                <a href="" >Buy Item</a>
            </div>
        </div>

        <div >
            <img  src="" alt="" />
        </div>

    </div>
</div>