一：基础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. tensorflow学习笔记--dataset使用，创建自己的数据集

    数据读入需求 我们在训练模型参数时想要从训练数据集中一次取出一小批数据(比如50条.100条)做梯度下降,不断地分批取出数据直到损失函数基本不再减小并且在训练集上的正确率足够高,取出的n条数据还要是预 ...

  2. 简单javascript学习总结

    2019-10-19 //文章汇总于绿叶学习网 console.log()                              //控制台输出 目录 数据类型:.... 2 函数:.... 3 ...

  3. ACM-Maximum Tape Utilization Ratio

    题目描述:Maximum Tape Utilization Ratio Tags: 贪婪策略 设有n 个程序{1,2,…, n }要存放在长度为L的磁带上.程序i存放在磁带上的长度是li ,1 < ...

  4. 51nod 1191：消灭兔子 贪心+优先队列

    1191 消灭兔子 题目来源: 2013腾讯马拉松赛第三场 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 有N只兔子,每只有一个血量B[i],需要 ...

  5. jquery 获取同级元素

    $(".userinfo-three:eq(0)").css({                 "width": winWidth * 300 / 1080, ...

  6. 18 ~ express ~ 前台分类导航展示 与 排序

    一,前台分类导航展示 1,后台文件:  /router/main.js router.get('/',(req,res,next)=>{ /** * 从数据库中读取分类信息 * rs是一个数组类 ...

  7. oracle(5)--DQL查询语句

    DQL 数据查询语句(data query language) 1.查询条件符号: < ,  > ,  = ,    <= ,  >= ,    != ,  < > ...

  8. zabbix 日志

    /var/log/zabbix/ tail -f /var/log/zabbix/zabbix_server.log tail -f /var/log/zabbix/zabbix_agentd.log

  9. ssh and scp从远程服务器下载文件

    scp -r root@172.16.252.32:/home/files /home/files   下载目录  -r root是用户172.16.252.32是ip:/home/files 是你要 ...

  10. HZNU-ACM寒假集训Day8小结 最小生成树

    最小生成树(无向图) Kruskal 给所有边按从小到大排序 形成环则不选择(利用并查集) P1546 最短网络   https://www.luogu.com.cn/problem/P1546 #i ...