微信扫一扫打赏支持

js中json数据简单处理（JSON.parse()和js中嵌套html）

js中json数据简单处理（JSON.parse()和js中嵌套html）

一、总结

1、html中嵌套js：<script>js代码</script>

2、js中嵌套html：document.write('<table><tr><th>key</th><th>value</th></tr>') //2、在js中嵌套html，用document.write()

 

二、js中json数据简单处理

练习：JSON数据输出

  • 实例描述：

    将JSON数据以表格的形式在页面输出

  • 案例要点：

    JSON数据的解析；
    表格的动态输出

 

三、代码

输入：

var jsonstr='[{"name":"aaa","age":30},{"name":"bbb","age":25},{"name":"ccc","age":18}]'

输出：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>练习01</title>
 6     <style type="text/css">
 7     td{
 8       width: 150px;
 9       height: 30px;
10       background: rgba(10,100,10,0.3);
11     }
12     </style>
13 </head>
14 <body>
15     <script>
16     //假定下面数据时从服务器获取到的
17         var jsonstr='[{"name":"aaa","age":30},{"name":"bbb","age":25},{"name":"ccc","age":18}]' //5、js中的符号，逗号和分号
18 
19         function textJson(){
20             var jsonobj=JSON.parse(jsonstr) //1、JSON.parse()获取json数组并且转化为字符串
21             // alert(jsonstr)
22             // alert(jsonobj)
23              output(jsonobj)
24         }
25 
26         function output(o){
27             document.write('<table><tr><th>key</th><th>value</th></tr>') //2、在js中嵌套html，用document.write()
28             for(var i in o){ //3、for in方式遍历
29                 // alert(o[i])
30                 for (var j in o[i]){
31                     // alert(o[i][j]) ///4、o[i][j]方式访问数组
32                     document.write('<tr><td>'+j+'</td>'+'<td>'+o[i][j])+'</td></tr>'
33                 }
34 
35             }
36             document.write('</table>')
37 
38         }
39         textJson()
40     </script>
41 </body>
42 </html>

 

posted @ 2018-05-16 12:40  范仁义  阅读(1116)  评论(0)  编辑  收藏  举报