2011-10-12 25 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

非常感谢! –