How to check the value of a key when the key's name is equal to a variable string, then use jQuery to display certain HTML?

Question

For an assignment in JavaScript and jQuery, I have an object where the keys are either state names or state abbreviations (e.g. Nevada, Washington, PA, NY, etc.) and the values are either true or false (as Booleans not strings).

I'm using an API to get the state in which a webpage's visitor is located, and I'm storing that state into localStorage as well as into a JavaScript variable called state:

$.get('https://api.geoapify.com/v1/ipinfo?&apiKey=de43045d1ab840e9b94f07dee35c6935', function(response){
    console.log('State received...');
    state = response.state.name;
    localStorage.setItem('state', state)
    console.log(state)
    });

I need to check what the value is (true or false) for the visitor's state's name as a key in the object. If the value is true, I need to display a certain set of strings in the assignment's HTML. These strings are in another object called products which has 2 sub-objects.

I'm not allowed to edit the HTML at all. The HTML makes 3 columns and each column has divs for name, info blurb, and a product image. The 3 columns all have the same-named classes for name, info blurb, and product image divs, but I only should be changing one of the column's values.

This is what I have written so far but it's not changing anything in the CodePen. And I'm stumped here:

    state_keys = Object.keys(theObjectContainingStates);
  
    if (theObjectContainingStates.["state"] == true) {
      $('.med_card_info-name').html(products[1].name)
      $('.med_card_info-blurb').html(products[1].blurb)
      $('.med_card_info-image').html(products[1].imgSrc)
}

I think my first issue is am I even doing the right thing to check the key in the States Object that has the same name as the visitor's state?

if (theObjectContainingStates.["state"] == true) {
   }

score 0 · Answer 1 · answered Jul 07 '22 at 19:54

If this isn't what you need, please provide more code, also, revoke this API key that you added in the example, otherwise people can start using it.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript">
    let states = ['Nevada', 'Washington', 'PA', 'NY', 'Federal District'];

    $.get('https://api.geoapify.com/v1/ipinfo?&apiKey=de43045d1ab840e9b94f07dee35c6935', function (response) {
        console.log('State received...');
        state = response.state.name;
        localStorage.setItem('state', state);

        if (states.includes(state)) {
            console.log('The state of the user is in the list');
        } else {
            console.log('User state not found in the list');
        }

        console.log(state);
    });
</script>

score 0 · Answer 2 · answered Jul 24 '22 at 00:29

Just to make sure I understand the problem, you have an object called 'theObjectContainingStates', and you want to see if certain properties in that object exist, but to check the property key names, you'll be using a string variable called 'state', correct?

When using variables as keys in objects, simply get rid of the dot and wrap the variable in square brackets:

if (theObjectContainingStates[state] !== undefined) {
  ...insert code...
}

How to check the value of a key when the key's name is equal to a variable string, then use jQuery to display certain HTML?

2 Answers2