使用JQuery顯示JSON

Question

我在使用JQuery將JSON結構中的嵌套對象顯示到頁面時遇到問題。 我正在使用JQuery的函數（.getJSON），但它似乎沒有用。

這是下面的JSON文件：

{
"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;"
           }
        }
}   

這是使用JQuery訪問JSON對象的Javascript文件：

$(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);
    });
});

在上面的代碼中，＃letter-w是鏈接的id，單擊時顯示結果，＃output是輸出/結果將顯示在HTML頁面本身的div。 另外，為了檢查，我只寫了2-3行來訪問JSON對象。 PS JSON非常令人困惑，因為你需要注意所有的括號。 任何建議或幫助將不勝感激。 提前致謝！

Answer 1

這條線在錯誤的地方：

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

它在回調之外，因此在檢索和解析JSON之前實際執行，因為AJAX是異步的。 將其移至回調中：

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

還要檢查我的評論，看起來您的選擇器應該更改為#letter-w例如：

$('#letter-w').click

Answer 2

你應該看兩件事。 作為@MrCode ，請確保您的選擇器是正確的。 如果#letter-w是一個錨標簽，那么#letter-w a可能是錯誤的選擇器。

其次， $.getJSON是一個異步調用。 移動$('#output').html(html); 在成功回調中，以防止它在調用返回之前執行。

$(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);
        });
    });
});