使用JQuery顯示JSON

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

這是下面的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); 
    }); 
});

在上面的代碼，＃字母w是點擊鏈接時顯示結果的id，#output是輸出/結果將顯示在HTML頁面內的div。另外，爲了檢查，我只寫了2-3行來訪問JSON對象。 P.S JSON是非常混亂，因爲你必須照顧所有的大括號和所有。任何建議或幫助將不勝感激。提前致謝！

來源

2014-04-30 3mmaar

你的選擇正確嗎？你說'＃letter-w'是一個錨，但是你選擇了'＃letter-w a'，它將在'＃letter-w'內尋找一個錨。 – MrCode

@MrCode噢，它是一個錨標籤（a-href） – 3mmaar

這條線路是在錯誤的地方：

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

這是回調的外部和JSON被檢索和分析之前，因爲AJAX是異步所以實際上執行。將其放入回調：

還要檢查我的評論，它看起來像你的選擇應改爲#letter-w如：

$('#letter-w').click

來源

2014-04-30 17:56:10 MrCode

非常感謝！是的，那是我的錯誤。 @MrCode一個簡單的問題，在這種情況下，我必須使用循環來顯示對象還是直接逐個顯示它們？ – 3mmaar

兩件事情你應該看看。由於@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); 
     }); 
    }); 
});

來源

2014-04-30 17:57:39 War10ck

使用JQuery顯示JSON

回答

相關問題