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

时间：2021-11-29 00:07:02

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

输出：

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

 <!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数据&comma;JSON数据的格式&comma;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. Redhat6&period;4下安装Oracle10g

    Oracle10g_Redhat6.4 安装指南 文档说明 本文借鉴<Redhat_Linux_6.4下Oracle_10g安装配置手册><Redhat 6.4 安装 Oracle1 ...

  2. VSync Count 垂直同步

    原地址:http://blog.csdn.net/yesy10/article/details/7794556 Unity3D中新建一个场景空的时候,帧速率(FPS总是很低),大概在60~70之间.一 ...

  3. 说说数据库架构，ORM缓存和路由

    为什么在ORM层做缓存,而不是DB层 ORM能有效地提高程序员的开发效率,程序员更喜欢操作对象而不是数据库,他们不关心也不想手写一堆SQL语句,毕竟一个公司里普通程序员要占多数,他们并不是非常熟悉数据 ...

  4. docker私服

    1.下载私服镜像docker pull registry 2.启动容器docker run -d -p 5000:5000 -v /opt/data/registry:/var/lib/registr ...

  5. iOS完美版的UIScrollView无缝循环：你值得一看

    可以直接copy运行研究 .m头文件和声明的常量(宏和const) #import "ViewController.h" // UIScrollView的尺寸 const CGFl ...

  6. 小A点菜 洛谷 p1164

    题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家--餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:"随便点". 题目描述 不过ui ...

  7. &lbrack;bzoj4411&rsqb; &lbrack;Usaco2016 Feb&rsqb;Load balancing

    先离散化一下(也可以不用 枚举横坐标,用线段树维护两边纵坐标上的节点数. 每次在线段树上二分...(感觉似乎树状数组也行? #include<cstdio> #include<ios ...

  8. 随机采样和随机模拟：吉布斯采样Gibbs Sampling

    http://blog.csdn.net/pipisorry/article/details/51373090 吉布斯采样算法详解 为什么要用吉布斯采样 通俗解释一下什么是sampling. samp ...

  9. sqlalchemy的数据库ORM操作&lpar;表之间的关系&rpar;

    首先导入一些需要的东东 ,我是在flask中写的,也可以用纯python去写. from flask import Flask from sqlalchemy import create_engine ...

  10. 自动化运维之Saltstack

    第三十八课 自动化运维之Saltstack 目录 一.自动化运维介绍 二. saltstack安装 三. 启动saltstack服务 四. saltstack配置认证 五. saltstack远程执行 ...

相关文章