Displaying JSON using JQuery

Question

I am having problem in displaying the nested objects within the JSON structure into the a page using JQuery. I'm using JQuery's function (.getJSON), but it doesn't seem to be working.

This is the JSON file below:

{
"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
            },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
            },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
           }
        }
}   

And this is the Javascript file that uses JQuery to access the JSON objects:

$(document).ready(function () {
    $('#letter-w a').click(function (event) {
        event.preventDefault();
        $.getJSON('widget.json', function (data) {
            var html = '';
            html += data.widget.debug;
            html += data.widget.window.title;
            html += data.widget.window.name;
        });
        $('#output').html(html);
    });
});

In the above code, #letter-w is a id for a link that when clicked displays the result and #output is the div where the output/results will be displayed within the HTML page itself. Also, for the sake of checking, I've only written 2-3 lines to access the JSON objects. PS JSON is very confusing since you've to takecare of all the braces and all. Any suggestions or help would be grateful. Thanks in-advance!

Answer 1

This line is in the wrong place:

$('#output').html(html);

It is outside of the callback and so this actually executes before the JSON is retrieved and parsed because the AJAX is asynchronous. Move it into the callback:

$.getJSON('widget.json', function (data) {
    var html = '';
    html += data.widget.debug;
    html += data.widget.window.title;
    html += data.widget.window.name;
    $('#output').html(html);
});

Also check my comment, it looks like your selector should be changed to #letter-w such as:

$('#letter-w').click

Answer 2

Two things you should look at. As @MrCode a few moments ago, make sure your selector is right. If #letter-w is an anchor tag, then #letter-w a is probably the wrong selector.

Secondly, $.getJSON is an asynchronous call. Move $('#output').html(html); inside the success callback to prevent it from executing before the call returns.

$(document).ready(function () {
    $('#letter-w a').click(function (event) {
        event.preventDefault();
        $.getJSON('widget.json', function (data) {
            var html = '';
            html += data.widget.debug;
            html += data.widget.window.title;
            html += data.widget.window.name;
            $('#output').html(html);
        });
    });
});