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. php汉字转化为拼音函数

    <?php function Pinyin($_String, $_Code='gb2312'){ $_DataKey = "a|ai|an|ang|ao|ba|bai|ban|ban ...

  2. 【UML】UML在软件开发各个阶段的应用

    一.UML5个互联视图 UML中经常使用5个互联的视图来描写叙述系统的体系结构. 如图 (1)用例视图(Use-case View) 由专门描写叙述可被终于用户.分析人员.測试人员看到的系统行为的用例 ...

  3. 阿里云 CentOS7.4 环境安装mysql5.7

    1. 删除默认安装的数据库,无所谓的请略过 据说CentOS7.x版本会默认安装mariadb数据库,我有点强迫症,故卸载之: rpm -qa|grep mariadb yum remove mari ...

  4. shell-手机屏幕录制

    今天在做android联系的时候,想要把自己写的demo效果记录下来.在网上发现了录制手机屏幕的方法,如下 adb shell screenrecord /sdcard/demo.mp4 解释 adb ...

  5. LinearLayout -设置负值属性

    1.我们调整两个控件的位置的时候,数值不仅仅是正数,负的也行,这时候只不过是跑到相对位置的另一边去了,例如 <ImageView android:id="@+id/image" ...

  6. 63.当当网txt数据按行切割与合并

    获取文件有多少行 //获取文件有多少行 int getN(char *path) { FILE *pf = fopen(path, "r"); if (pf==NULL) { ; ...

  7. mahout-distribution-0.9.tar.gz的安装的与配置、启动与运行自带的mahout算法

    不多说,直接上干货! 首先,别在windows下搭建什么,安装什么Cygwin啊!直接在linux,对于企业里推荐用CentOS6.5,在学校里用Ubuntu. Mahout安装所需软件清单: 软件 ...

  8. qt多线程

    为什么要用多线程? 传统的图形用户界面应用程序都只有一个执行线程,并且一次只执行一个操作.如果用户从用户界面中调用一个比较耗时的操作,当该操作正在执行时,用户界面通常会冻结而不再响应.这个问题可以用事 ...

  9. Linux shell command学习笔记（二）

    <cut> 作用:从输入文件或者命令的输出中析取出各种域 用法:cut –c{字符串范围} –d{字段间分割符} –f{字段索引编号} 举例: (1)查看在线用户:who | cut –c ...

  10. CF-833B The Bakery（线段树优化Dp）

      Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought required ingredie ...