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. 洛谷 P1256 显示图像

    P1256 显示图像 题目描述 古老的显示屏是由N×M个像素(Pixel)点组成的.一个像素点的位置是根据所在行数和列数决定的.例如P(2,1)表示第2行第1列的像素点.那时候,屏幕只能显示黑与白两种 ...

  2. 【MySQL】常见错误与经常使用命令的集锦

    [背景介绍]     在使用SQL Server数据库期间,想必大家一定都有过解决各种问题的经历了.非常多时候,都会在大家的博客中看到问题与解决方式. 如今开发使用的是MySQL数据库.如今来看,发现 ...

  3. 雅黑PHP探针 For PHP7

    雅黑PHP探针 For PHP7资料来源: https://kn007.net/topics/yahei-php-probe-for-php7/在v0.4.7版本的基础上,修正了废弃函数及错误语法.使 ...

  4. 1.22 Python基础知识 - 正则表达式

    Python正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re ...

  5. MyBatis学习总结（12）——Mybatis+Mysql分页查询

    package cn.tsjinrong.fastfile.util; /**  * @ClassName: Page  * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...

  6. 设计模式六大原则（六）： 开闭原则(Open Closed Principle)

    定义: 一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 问题由来: 在软件的生命周期内,因为变化.升级和维护等原因需要对软件原有代码进行修改时,可能会给旧代码中引入错误,也可能会使我们不得不 ...

  7. ubuntu下useradd与adduser差别，新建用户不再home文件夹下

    useradd username不会在/home下建立一个目录username adduser username会在/home下建立一个目录username useradd -m username跟a ...

  8. gogodroid－－android 上的IPV6工具

    gogodroid--android 上的IPV6工具 系统需求是 Android 1.6以上的系统,已经root,能够执行modprobe命令(在终端里输入modprobe,如果显示了帮助便可以), ...

  9. ProgressBar-style属性分析

    首先我们看下framework下关于进度条的style定义,如下 <style name="Widget.ProgressBar"> <item name=&qu ...

  10. mahout中KMeans算法

    本博文主要内容有   1.kmeans算法简介 2.kmeans执行过程  3.关于查看mahout中聚类结果的一些注意事项 4.kmeans算法图解      5.mahout的kmeans算法实现 ...