Access JSON values from variable

Question

The click handler is accessing a data attribute on the element and setting a variable based on what is it, in this case 'option1'. I want to use the name of this variable to access a JSON object. But in the example it's returning 'undefined', as if it's looking for an array called 'thisOption'. How can I use this data attribute to bring back the correct JSON content?

// Note: thisOption returns "option1", which is correct.

jq = jQuery;

// Pass info
jq('.button').click( function() {
    var thisOption = jq(this).data('name');
    jq('#subscriptions .price').text(thisOption.monthly);
});

var option1 = {
    "name"      : "Super Pack",
    "monthly"   : "€10",
    "yearly"    : "€100",
    "gift"      : "Free €20 voucher"
};

MrCode · Accepted Answer · 2014-04-16 13:59:55Z

1

If option1 is in the global scope then you can access it via the window object with a dynamic key:

jq('#subscriptions .price').text(window[thisOption].monthly);

The [] notation allows you to use variable property or key names.

answered Apr 16, 2014 at 13:59

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paul Redmond Over a year ago

Great, thanks! Why do you need to use the window object to access it?

MrCode Over a year ago

If your jq(this).data('name') returns different variable names, you can only access them via the window object (if they are global) or if they are contained in another variable/object. In the answer you accepted, the option1 is hardcoded, so if your data-name has option2 it won't work.

Fizer Khan · Accepted Answer · 2014-04-16 14:00:02Z

1

You can access the option1 like below

jq('#subscriptions .price').text(window[thisOption].monthly);

Because option1 is in global scope, you can access it like window.option1. When option1 is a value of some variable, then you should access like window[thisOption]

answered Apr 16, 2014 at 14:00

Fizer Khan

93.6k30 gold badges147 silver badges156 bronze badges

Comments

Aldren Terante · Accepted Answer · 2014-04-16 14:07:07Z

1

I made some structure so we can see it clearly, you can also check it in jsfiddle.net

Heres the url: http://jsfiddle.net/8hTrr/3/

HTML

<a href="#" data-option="monthly" class="button">test</a>
<div id="subscriptions">
    <p class="price"></p>
</div>

JS

var option1 = {
    "name"      : "Super Pack",
    "monthly"   : "€10",
    "yearly"    : "€100",
    "gift"      : "Free €20 voucher"
};

jq = jQuery;

// Pass info
jq('.button').click( function() {
    var thisOption = jq(this).data('option');
    jq('#subscriptions .price').text(option1[thisOption]);    
});

answered Apr 16, 2014 at 14:07

Aldren Terante

1891 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

Access JSON values from variable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related