一:基础JSON对象

 二:JSON数组数据

以下为增删修改方法:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Json</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <script src="~/js/mui.min.js"></script>
  8. <link rel="stylesheet" type="text/css" href="~/css/reset.css">
  9. <script src="~/js/jquery1.7.2.js"></script>
  10. </head>
  11. <body>
  12. <h2>清浅</h2>
  13. </body>
  14. </html>
  15.  
  16. <Script>
  17.  
  18. $(function () {
  19. //JsonDelete();
  20. //JsonAdd();
  21. //JsonArryDelete();
  22. JsonArryAdd();
  23. });
  24.  
  25. //json对象删除数据
  26. function JsonDelete()
  27. {
  28. var jsonstr = '{\"name\":\"张大佛爷\", \"Age\":\"170\", \"sex\":\"男\" }';
  29. console.log(jsonstr);
  30.  
  31. var json = JSON.parse(jsonstr);
  32. delete json.sex;
  33. console.log(json);
  34.  
  35. jsonstr = JSON.stringify(json);
  36. console.log(jsonstr);
  37. }
  38.  
  39. //json对象添加数据
  40. function JsonAdd()
  41. {
  42. var jsonstr = '{\"name\":\"张大佛爷\", \"Age\":\"170\" }';
  43. console.log(jsonstr);
  44.  
  45. var json = JSON.parse(jsonstr);
  46. json.sex = '男';
  47. console.log(json);
  48.  
  49. jsonstr = JSON.stringify(json);
  50. console.log(jsonstr);
  51. }
  52.  
  53. //Json数组删除
  54. function JsonArryDelete()
  55. {
  56. var jsonstr = '{\"zhang\":[{\"name\":\"张大佛爷\",\"Age\":\"170\",\"sex\":\"男\"},{\"name\":\"张启灵\",\"Age\":\"100\",\"sex\":\"男\"}],\"wu\":[{\"name\":\"吴邪\",\"Age\":\"25\",\"sex\":\"男\"}]}';
  57.  
  58. var json = JSON.parse(jsonstr);
  59. console.log(json);
  60.  
  61. //删除张起灵
  62. delete json.zhang[1];
  63. console.log(json);
  64.  
  65. //强迫症,去掉null
  66. var zhangstr = [];
  67. for (var i = 0; i < json.zhang.length; i++) {
  68. var obj = json.zhang[i];
  69. if (obj != null)
  70. zhangstr.push(obj);
  71. }
  72.  
  73. json.zhang = zhangstr;
  74.  
  75. jsonstr = JSON.stringify(json);
  76. console.log(jsonstr);
  77. }
  78.  
  79. //Json数组添加
  80. function JsonArryAdd() {
  81. var jsonstr = '{\"zhang\":[{\"name\":\"张大佛爷\",\"Age\":\"170\",\"sex\":\"男\"},{\"name\":\"张启灵\",\"Age\":\"100\",\"sex\":\"男\"}],\"wu\":[{\"name\":\"吴邪\",\"Age\":\"25\",\"sex\":\"男\"}]}';
  82.  
  83. var json = JSON.parse(jsonstr);
  84. console.log(json);
  85.  
  86. var people = {
  87. "name": "吴三省",
  88. "Age": "45",
  89. "sex": "男"
  90. }
  91.  
  92. json.wu.push(people);
  93. console.log(json);
  94.  
  95. jsonstr = JSON.stringify(json);
  96. console.log(jsonstr);
  97. }
  98.  
  99. </Script>
 十年一瞬如沧海,谁人还逝藏海花 。  ——篮场滑行者·库里

前端Json 增加,删除,修改元素(包含json数组处理)的更多相关文章

  1. 在Javascript操作JSON对象,增加 删除 修改

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...

  2. Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改

    由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...

  3. AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层

    AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...

  4. [JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改

    上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管 ...

  5. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

  6. javascript操作JSON对象,增加 删除 修改

    JS只能输入数字,数字和字母等的正则表达式 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace( ...

  7. Sql增加,删除,修改列

    1. 查看约束条件 - MySQL: SELECT * FROM information_schema.`TABLE_CONSTRAINTS` where table_name = 'book'; - ...

  8. Spring Boot 增加删除修改 批量

    1.批量删除  a.自定义Repositoy中写 前台处理https://blog.csdn.net/yhflyl/article/details/81557670首先前台先要获取所有的要删除数据的I ...

  9. php后台增加删除修改跳转页面

    第一步 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

随机推荐

  1. HDU 3397 线段树 双懒惰标记

    这个是去年遗留历史问题,之前思路混乱,搞了好多发都是WA,就没做了 自从上次做了大白书上那个双重懒惰标记的题目,做这个就思路很清晰了 跟上次大白上那个差不多,这个也是有一个sets标记,代表这个区间全 ...

  2. Docker Python 例子

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  3. ACM-Checker Challenge

    题目描述:Checker Challenge  1000(ms)  10000(kb)  20 / 90 Examine the 6x6 checkerboard below and note tha ...

  4. Marvolo Gaunt's Ring(巧妙利用前后缀进行模拟)

    Description Professor Dumbledore is helping Harry destroy the Horcruxes. He went to Gaunt Shack as h ...

  5. 【LeetCode】验证二叉搜索树

    [问题]给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征:节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜 ...

  6. 对OpenSSL心脏出血漏洞的试验

    1.安装OpenSSL环境 sudo apt-get install openssl sudo pip install pyopenssl(中间会提示ffi.h 没有那个文件或目录,sudo apt- ...

  7. 1, vm: PropTypes.instanceOf(VM).isRequired

    子模块的文件引入父工程对象时,出现红色warning,提示传入的对象类型不是所要求的类型. 思路是父工程引用的JS包和子模块使用的包不是同一个包,解决办法是父工程和子工程都使用同一个包. resolv ...

  8. WebServerInitializedEvent &ApplicationRunner

    application.properties app.name=yaoyuan2 app.dept.id=1 MyConfig.java import lombok.AllArgsConstructo ...

  9. 图片分割之GrabCut算法、分水岭算法

    https://www.cnblogs.com/zyly/p/9392881.html 所谓图像分割指的是根据灰度.颜色.纹理和形状等特征把图像划分成若干互不交迭的区域,并使这些特征在同一区域内呈现出 ...

  10. java多线程之volatile关键字

    public class ThreadVolatile extends Thread { public boolean flag=true; @Override public void run() { ...