JavaScript scope with JSON object

Question

This function is called when an element is clicked. It creates a string based on what element was clicked, and then looks up the value associated with that string in a JSON object. It then alerts that value. Here's how it looks:

function alertHelp(){
    var option = $(this).context.parentNode.textContent.substring(0, $(this).context.parentNode.textContent.length - 2);
    $.getJSON("Messages.json", function(json, option) {
        alert(json[option]);
    });
}

What I've found is that option is set correctly, but then when passed to the function with the alert is changed. If I alert(option) right before alert(json[object]);, I get an alert that simply says "success". Not sure what's up with that. alert(json[option]) simply alerts "undefined".

Here's Messages.json:

{
    "Space Control": "Red = a square black controls. Green = a square white controls. Yellow = a square contested by both players",
    "Legal Moves": "Click on a piece and a blue dot will appear on all the squares that piece can move to",
    "PieceFlair": "When you move a piece, all the pieces that come under attack as a direct result of the piece you moved will pulse white",
    "Forks": "All the moves that would result in a simultaneous attack of two pieces are shown",
    "Pins": "Not yet implemented"
}

can you post the content of Messages.json? it'd be useful to see the structure of the JSON to understand what's going on. — Joe Minichino
– Joe Minichino, Commented Aug 10, 2013 at 19:20
The reason alert(option); shows "success" is because you've redefined it as the second parameter to the callback: , function(json, option) {. Either don't include it (because I don't think you need it), or change the parameter name — Ian
– Ian, Commented Aug 10, 2013 at 19:28
I tried changing the parameter name. That didn't seem to do anything. I also tried just passing in a string like so function(json, "Space Control") { and that seemed to break everything, with an "Unexpected String" error being thrown. — Captain Stack
– Captain Stack, Commented Aug 10, 2013 at 19:32
@CaptainStack You can't use a string as a parameter name. You don't need the second parameter for the callback, so just use , function(json) {. Then, alert(option); to make sure it's set properly. If it looks right but isn't working, try trimming it — Ian
– Ian, Commented Aug 10, 2013 at 19:35

metadings · Accepted Answer · 2013-08-10 19:30:19Z

2

You have "shadowed" your var option by the function argument option, try this instead:

var text = $(this).context.parentNode.textContent;
var option = text.substring(0, text.length - 2);

$.getJSON("Messages.json", function(json, status) {
    alert(status);  // success
    alert(json[option]);
});

answered Aug 10, 2013 at 19:30

metadings

3,8482 gold badges30 silver badges37 bronze badges

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

2 Comments

Captain Stack Over a year ago

This definitely worked. I'm not sure I fully understand the solution though. I actually didn't realize that the variables would exist inside the function (still don't always understand scope in JavaScript). What I don't understand though is why the second parameter is redefined.

metadings Over a year ago

well the functions are nested, you can always access outer vars from inner functions, but not inner vars from outer functions. (the function sourrounding the var is it's "scope", a function that uses a var from outside is a "closure" for that var.)

Collectives™ on Stack Overflow

JavaScript scope with JSON object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related