js 操作 json

0 0

js 操作 json

<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里面要怎么写？

json JavaScript

11 years ago

Bileon

Bileon 11 years ago

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

前端渲染

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

baiduTemplate https://github.com/wangxiao/BaiduTemp...
jade https://github.com/visionmedia/jade
ejs https://code.google.com/p/embeddedjav...

等等。
通过定义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 https://developers.google.com/closure...

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

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

answered 11 years ago

生锈的琴弦

生锈的琴弦 answered 11 years ago

js 操作 json

Bileon

Answers

前端渲染

后端编译

生锈的琴弦

Your Answer