2011-10-12 55 views
0

我想打印出JSON對象屬性列表。我也嘗試打印出一個單獨的ob對象的屬性。打印輸出到控制檯表明我正在打開文件並接收兩個對象和子對象。但是,我在嘗試遍歷對象並將它們打印出來時出錯。JSON和JavaScript的語法

... 
<script type="text/javascript"> 
    var dta1; 
    $(document).ready(function() { 
     $.ajax({ 
      type : "GET", 
      url : "data/data5.json", 
      success : function test(data) { 
       dta1 = data.object1; 
       dta2 = data.object2; 

       console.log("object1", dta1);    
       console.log("object2", dta2);    
      } 
     }); 
    }); 
</script> 

</head> 
<body> 
    <script type="text/javascript"> 
     for(i in dta1){ 
      document.write(dta1[i].x); 
     } 
     document.write(dta1["object11"].x); 
    </script> 
</body> 

這裏是json文件。

{ 
    "object1": { 
     "object11": {"x": "10", "y": "20", "z": "30"}, 
     "object12": {"x": "40", "y": "50", "z": "60"}, 
     "object13": {"x": "70", "y": "80", "z": "90"} 
    }, 
    "object2": { 
     "object21": {"x": "100", "y": "200", "z": "300"}, 
     "object22": {"x": "400", "y": "500", "z": "600"}, 
     "object23": {"x": "700", "y": "800", "z": "900"} 
    } 
} 
+0

你怎麼知道打印時dta1是否已加載? – lc2817

+0

lc2817,console.log(「object1」,dta1); < - 這通過Chrome開發工具(在控制檯選項卡中)顯示瀏覽器中的信息。 –

+0

我知道,我會談論html部分,而這正是答案中所陳述的。 – lc2817

回答

4

你的第二個腳本塊將一個在頭前,由於您使用jQuery的「文件準備」處理程序只有在文檔完全加載後運行的運行。

此外,在下一代碼塊運行之前,您不能依賴於異步請求(AJAX)的完成。任何使用通過AJAX檢索的數據都應在「成功」回調中調用。

什麼你應該做的是建立在你的HTML容器元素,如

<body> 
    <ul id="data-container"></ul> 
</body> 

和你的AJAX成功回調中追加值是,例如

success : function test(data) { 
    var dta1 = data.object1; 
    var dta2 = data.object2; 

    var container = $("#data-container"); 

    for (var o in dta1) { 
     if (dta1.hasOwnProperty(o)) { 
      container.append($("<li>").text(dta1[o].x)); 
     } 
    } 
} 
+0

非常感謝! –