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}]'

输出：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>练习01</title>
     <style type="text/css">
     td{
       width: 150px;
       height: 30px;
       background: rgba(10,100,10,0.3);
     }
     </style>
 </head>
 <body>
     <script>
     //假定下面数据时从服务器获取到的
         var jsonstr='[{"name":"aaa","age":30},{"name":"bbb","age":25},{"name":"ccc","age":18}]' //5、js中的符号，逗号和分号

         function textJson(){
             var jsonobj=JSON.parse(jsonstr) //1、JSON.parse()获取json数组并且转化为字符串
             // alert(jsonstr)
             // alert(jsonobj)
              output(jsonobj)
         }

         function output(o){
             document.write('<table><tr><th>key</th><th>value</th></tr>') //2、在js中嵌套html，用document.write()
             for(var i in o){ //3、for in方式遍历
                 // alert(o[i])
                 for (var j in o[i]){
                     // alert(o[i][j]) ///4、o[i][j]方式访问数组
                     document.write('<tr><td>'+j+'</td>'+'<td>'+o[i][j])+'</td></tr>'
                 }

             }
             document.write('</table>')

         }
         textJson()
     </script>
 </body>
 </html>