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. js声明json数据,打印json数据,遍历json数据,转换json数据为数组

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

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

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

  9. ASP.NET用SQL Server中的数据来生成JSON字符串

    原文引自:  作者: 缺水的海豚  来源: 博客园  发布时间: 2010-09-21 21:47  阅读: 6136 次  推荐: 0   原文链接   [收藏] 摘要:ExtJs用到的数据内容基本 ...

随机推荐

  1. javascript 日期操作

    1.获取指定年月有多少周 /** * 获得一个月的周数 * @param {} y {xxxx}4位数 * @param {} m {0-11} * @return {} */ function ge ...

  2. 单片网络接口芯片W5100的原理与应用

    随着计算机网络技术的发展,作为全球最大计算机网络——I n t e r ac t已成为当今信息社会重要的基础信息设施.在工业测控.智能仪器.智能家庭等领域,大量应用嵌入式设备接人 I n t e r ...

  3. VMware-Transport(VMDB) error -44:Message.The VMware Authorization Service is not running解决方案

    出现的错误如下: 原因:本机中有一个VMware服务未开启导致的. 解决方案: 1.打开“运行”->输入services.msc !!!文章转自浩瀚先森博客,转载请注明,谢谢.http://ww ...

  4. cocos2dx loading界面 预加载资源 与 资源释放

    预加载图片: 1.CCTextureCache::sharedTextureCache()->addImage("icon.png"); 2.CCTextureCache:: ...

  5. [java学习笔记]java语言基础概述之转义字符&amp;break&amp;continue

    1.转义字符 \t:制表符 \n:回车 \b:退格 \r:回车 \":双引号 \\:反斜线(常用于文件路径的书写中)   windows系统中回车符其实是由两个符号组成的,\r\n linu ...

  6. MongoDB学习3

    MongoDB学习(翻译3)   支持的where字句(比较多,今天先写一部分) 本节介绍支持的where字句 正如前面提到的,不是所有的C#表达式都支持where子句.您可以以此文为指导,或者你可以 ...

  7. redis(1)

    一.Redis介绍 Redis 是一款开源的,基于 BSD 许可的,高级键值 (key-value) 缓存 (cache) 和存储 (store) 系统.由于 Redis 的键包括 string,ha ...

  8. SQL基本编程,分支语句,循环语句,存储过程,触发器

    基本编程: 定义变量 declare @变量名 数据类型 赋值 set @变量名 = 值 select @变量名 = 值 取值打印 select @变量名 print @变量名 映射到结果集 打印到消 ...

  9. scp 命令快速使用讲解

    在 Linux 下使用 scp 命令 scp 是安全拷贝协议(Secure Copy Protocol)的缩写,和众多 Linux/Unix 使用者所熟知的拷贝(cp)命令一样.scp 的使用方式类似 ...

  10. Ext.NET webform

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的非开源Web控件,包含有丰富的Ajax运用,其前身是Coolite[1]  .