您好,匿名用户
随意问技术百科期待您的加入

js 操作 json

0 投票
<head>
<script type="text/javascript" >
function showJSON() {    
    var user =     
    {     
        "username":"andy",    
        "age":20,    
        "info": { "tel": "123456", "cellphone": "98765"},    
        "address":    
            [    
                {"city":"beijing","postcode":"222333"},    
                {"city":"newyork","postcode":"555666"}    
            ]    
    }    
        
    alert(user.username);    
    alert(user.age);    
    alert(user.info.cellphone);    
    alert(user.address[0].city);    
    alert(user.address[0].postcode);    
}   
</script>
</head>
<body>

</body>
</html> 

如何在页面显示

alert(user.username);    
alert(user.age);    
alert(user.info.cellphone);    
alert(user.address[0].city);    
alert(user.address[0].postcode);  

这些要显示的属性 在body里面要怎么写?

用户头像 提问 2013年 10月4日 @ Nautilus 上等兵 (223 威望)
分享到:

1个回答

0 投票

除了@felix021 的回答外,还有其他的实现方式。
如果需要将大量的JSON数据渲染到页面中,可以考虑Javascript模版渲染引擎,下面介绍两种不同的模版渲染引擎。

前端渲染

直接在前端渲染HTML模版。此类模版引擎有

等等。
通过定义HTML模版

<!-- templates/supplies.ejs -->

<h1>Supplies</h1>
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
   <li><%= supplies[i] %></li>
<% } %>
</ul>

然后使用获得的JSON数据,渲染模版

var my_supplies = {supplies: ['mop', 'broom', 'duster']};
var result = new EJS({url: 'templates/supplies.ejs'}).render(my_supplies);

最后将模版回填到网页中

document.getElementById('supply_list').innerHTML = result

使用模版渲染的优点是避免了大量冗余重复的用于设置HTML文本的JS代码。

后端编译

在后端编译HTML模版为Javascript。如

closure-template通过定义HTML模版,接着在后台预先编译为Javascript函数的方式,实现模版渲染。和前端渲染相比,缺点显而易见,需要编译增加了修改的成本;而优点是,使用前端渲染的方式产生了大量HTML模版碎片,即使有些模版是相关联的。而使用closure-template可将相关模版编译为一个js文件,对于大型项目来说易于控制。

我这里只是简单介绍不同的模版渲染方案。详细信息请参考以上项目的文档。

用户头像 回复 2013年 10月1日 @ Darius 上等兵 (331 威望)
提一个问题:

相关问题

+1 投票
1 回复 139 阅读
用户头像 提问 2012年 12月1日 @ Lux 上等兵 (267 威望)
0 投票
0 回复 18 阅读
0 投票
1 回复 24 阅读
用户头像 提问 2014年 1月27日 @ Talon 上等兵 (294 威望)
0 投票
1 回复 25 阅读
用户头像 提问 2014年 2月12日 @ Archer 上等兵 (494 威望)
0 投票
1 回复 48 阅读
用户头像 提问 2012年 12月1日 @ Gragas 上等兵 (254 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...