一：基础JSON对象

 二：JSON数组数据

以下为增删修改方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Json</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <script src="~/js/mui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="~/css/reset.css">

    <script src="~/js/jquery1.7.2.js"></script>

</head>

<body>

   <h2>清浅</h2>

</body>

</html>

<Script>

    $(function () {

        //JsonDelete();

        //JsonAdd();

        //JsonArryDelete();

        JsonArryAdd();

    });

    //json对象删除数据

    function JsonDelete()

    {

        var jsonstr = '{\"name\":\"张大佛爷\", \"Age\":\"170\", \"sex\":\"男\" }';

        console.log(jsonstr);

        var json = JSON.parse(jsonstr);

        delete json.sex;

        console.log(json);

        jsonstr = JSON.stringify(json);

        console.log(jsonstr);

    }

    //json对象添加数据

    function JsonAdd()

    {

        var jsonstr = '{\"name\":\"张大佛爷\", \"Age\":\"170\" }';

        console.log(jsonstr);

        var json = JSON.parse(jsonstr);

        json.sex = '男';

        console.log(json);

        jsonstr = JSON.stringify(json);

        console.log(jsonstr);

    }

    //Json数组删除

    function JsonArryDelete()

    {

        var jsonstr = '{\"zhang\":[{\"name\":\"张大佛爷\",\"Age\":\"170\",\"sex\":\"男\"},{\"name\":\"张启灵\",\"Age\":\"100\",\"sex\":\"男\"}],\"wu\":[{\"name\":\"吴邪\",\"Age\":\"25\",\"sex\":\"男\"}]}';

        var json = JSON.parse(jsonstr);

        console.log(json);

        //删除张起灵

        delete json.zhang[1];

        console.log(json);

        //强迫症,去掉null

        var zhangstr = [];

        for (var i = 0; i < json.zhang.length; i++) {

            var obj = json.zhang[i];

            if (obj != null)

                zhangstr.push(obj);

        }

        json.zhang = zhangstr;

        jsonstr = JSON.stringify(json);

        console.log(jsonstr);

    }

    //Json数组添加

    function JsonArryAdd() {

        var jsonstr = '{\"zhang\":[{\"name\":\"张大佛爷\",\"Age\":\"170\",\"sex\":\"男\"},{\"name\":\"张启灵\",\"Age\":\"100\",\"sex\":\"男\"}],\"wu\":[{\"name\":\"吴邪\",\"Age\":\"25\",\"sex\":\"男\"}]}';

        var json = JSON.parse(jsonstr);

        console.log(json);

        var people = {

            "name": "吴三省",

            "Age": "45",

            "sex": "男"

        }

        json.wu.push(people);

        console.log(json);

        jsonstr = JSON.stringify(json);

        console.log(jsonstr);

    }

</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. 十三、JavaScript之跨多行的变量申明

    一.代码如下 二.运行效果 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" conten ...

  2. plsql和navicat连接远程oracle（易错点）

    plsql和navicat连接远程oracle,只需要安装oracle客户端即可.注意此处是oracle客户端(Instant Client),并不是oracle数据库. oracle客户端下载地址: ...

  3. jQuery原理系列-常用Dom操作

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply ...

  4. React 学习笔记（1） 基础语法和生命周期

    参看:视频地址 简单搭建一个react-cli: 2. React.createElement() 将object转化为 React语法 import React from 'react' impor ...

  5. Angular 学习1

    AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运 ...

  6. Python 比较 相等性 真值

    1 == 操作符测试 值 的相等性: is 测试对象的一致性.注意短字符串的is相等性测试,PVM会缓存短字符串,s1 is s2 将返回true. 2 false:"", [], ...

  7. Mysql升级、免安装版MYSQL安装与卸载

    1.         备份好数据库:表结构和数据: 2.         备份my.ini文件和data文件夹: 3.         卸载旧版本mysql: 4.         安装新版本mysq ...

  8. 动态添加，删除class样式

    function hasClass(obj, cls) { //class位于单词边界,判断class样式是否已经存在 return obj.className.match(new RegExp('( ...

  9. javascript 解决provisional headers are shown的过程

    请求没有被发送,因为是载入缓存资源. 大概是说 完全相同的请求间隔数毫秒(太短),导致加载失败,查看了chrome控制台发现 Provisional headers are shown 出现在 载入缓 ...

  10. windows driver 延时

    #define Delay_One_MicroSecond (-10) #define Delay_One_MilliSecond (Delay_One_MicroSecond * 1000) voi ...