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>

js中json数据简单处理（JSON.parse()和js中嵌套html）的更多相关文章

  1. JS解析json数据并将json字符串转化为数组的实现方法

    json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...

  2. ajax取json数据——简单的

    json数据:json4.json <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. JS：字符串转成json数据，和json转成字符串方法 iframe获取父级传过来的数据

    字符串转成json数据,和json转成字符串方法 //转为JSON adinfo=JSON.parse(adinfo) //转为字符串 adinfo=JSON.stringify(adinfo) 大概 ...

  4. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HttpServletResponse 返回的json数据不是json字符串，而是json对象

    今天在改一个bug 情况: 在spring boot中写了一个类Result ,用来统一封装 各个API响应结果 , 其中重写了toString()方法来返回 json字符串 . 在正常情况下,从其它 ...

  6. 如何构建JSON数据,JSON数据的格式,JSON数据的获取

    假设你是用$.getJSON();方法获取JSON数据$.getJSON(url,{"Action":"getStudent"},function(data){ ...

  7. sql语句 怎么从一张表中查询数据插入到另一张表中？

    sql语句 怎么从一张表中查询数据插入到另一张表中?  ----原文地址:http://www.phpfans.net/ask/MTc0MTQ4Mw.html 比如我有两张表 table1 字段 un ...

  8. js声明json数据，打印json数据，遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

  9. js声明json数据，打印json数据，遍历json数据，转换json数据为数组

    1.js声明json数据: 2.打印json数据: 3.遍历json数据: 4.转换json数据为数组; //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿 ...

随机推荐

  1. 智能指针shared_ptr, auto_ptr, scoped_ptr, weak_ptr总结

    看这里: http://blog.csdn.net/lollipop_jin/article/details/8499530 shared_ptr可以多线程同时读,但是涉及到写,需要加锁. share ...

  2. UVA 11346 Probability (几何概型， 积分)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=2321">https://uva ...

  3. 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘

    如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/  本文基本是谷歌翻译 H ...

  4. worktools-不同分辨率下图片移植

    1.下载需要移植的平台代码 1)查看手机需要的项目平台信息:adb shell getprop | gerp flavor     ----->mt6732_m561_p2_kangjia_cc ...

  5. [LuoguP4892]GodFly的寻宝之旅 状压DP

    链接 基础状压DP,预处理出sum,按照题意模拟即可 复杂度 \(O(n^22^n)\) #include<bits/stdc++.h> #define REP(i,a,b) for(in ...

  6. onvif开发实战2--总结框架搭建

    完成框架搭建后,编写自己的主函数起onvif服务 编写makefile objs = onvif.o onvif_func.o duration.o soapC.o soapServer.o stds ...

  7. win7旗舰版怎么降级到专业版

    一.操作准备及注意事项 1.UltraISO光盘制作工具9.5 2.备份C盘及桌面文件 二.win7旗舰版改成专业版的步骤 1.当前系统为Win7 SP1 64位旗舰版: 2.按Win+R打开运行,输 ...

  8. C++访问WebService gSoap方式

    一.             gSOAP访问WebService 1.      下载gSOAP gSOAP 2.7.17 版下载地址http://sourceforge.net/projects/g ...

  9. SSO单点登录学习总结（3）—— 基于CAS实现单点登录实例

    第一: 本demo在一个机器上实现(三个虚拟主机),来看SSO单点登录实例(我们可以布到多个机器上使用都是同一个道理的),一个服务器主机,和两个客户端虚拟主机 [html] view plaincop ...

  10. [TS] Implement a singly linked list in TypeScript

    In a singly linked list each node in the list stores the contents of the node and a reference (or po ...