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. 【Codeforces Round #427 (Div. 2) B】The number on the board

    [Link]:http://codeforces.com/contest/835 [Description] 原本有一个数字x,它的各个数码的和原本是>=k的; 现在这个数字x,在不改变位数的情 ...

  2. LeetCode_ZigZag Conversion

    一.题目 ZigZag Conversion Total Accepted: 31399 Total Submissions: 140315My Submissions The string &quo ...

  3. js获取单选button的值

    <!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...

  4. 【单词】常见单词含义的辨异（emulator/simulator、hardware/firmware）

    1. emulator 与 simulator The Simulator tries to duplicate the behavior of the device.(仿真的是行为): The Em ...

  5. 类名引用static变量好处

    不仅强调了变量static的结构,而且在有些情况下他还为编译器进行优化提供了更好的机会.

  6. Codeforces Round #195 (Div. 2) 少部分题解

    太困了于是没做...第二天看题蘑菇题居多就只切了简单的两个... A:直接输出... int main() { //FIN; //FOUT; int x,y; cin>>x>> ...

  7. BZOJ3514: Codechef MARCH14 GERALD07加强版(LCT，主席树)

    Description N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. Input 第一行四个整数N.M.K.type,代表点数.边数.询问数以及询问是否加密.接下来M ...

  8. PatentTips - Virtual machine management using processor state information

    BACKGROUND OF THE INVENTION The invention generally relates to virtual machine management, and more ...

  9. 洛谷 P2677 超级书架 2

    P2677 超级书架 2 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有 ...

  10. [React & Testing] Simulate Event testing

    Here we want to test a toggle button component, when the button was click, state should change, styl ...