极客观点
项目管理
HarmonyOS
<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里面要怎么写？
除了@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文件，对于大型项目来说易于控制。
我这里只是简单介绍不同的模版渲染方案。详细信息请参考以上项目的文档。