JS操作JSON常用方法(10w阅读)

一、概念简介

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
在JSON中,有两种结构:对象和数组。

1.对象

var packJson = {"name":"Liza", "password":"123"};

一个对象以“{”开始,“}”结束,“key/value”之间运用 “,”分隔。

2.数组

var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];

数组是值的有序集合。一个数组以“[”开始,“]”结束。值之间运用 “,”分隔。

二、JSON对象和JSON字符串的转换

在数据传输过程中,JSON是以字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
JSON字符串:

var jsonStr ='{"name":"Liza", "password":"123"}' ;

JSON对象:

var jsonObj = {"name":"Liza", "password":"123"};

1、 JSON字符串转化 JSON对象

var jsonObject= jQuery.parseJSON(jsonstr);

2、 JSON对象转化 JSON 字符串

var jsonstr =JSON.stringify(jsonObject );

三、JSON的输出美化

JSON.stringify(value[, replacer [, space]])

上一节讲到了将JSON转化为字符串可以用JSON.stringify() 方法,stringify还有个可选参数space,可以指定缩进用的空白字符串,用于美化输出(pretty-print);
space参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数没有提供(或者为null)将没有空格。

我们看下代码:

var formatJsonStr=JSON.stringify(jsonObject,undefined, 2);

待美化的JSON:

美化后的效果:

四、JSON字符串的替换

工作经常遇到这样的字符串,如下:

需要经过替换后,才能从字符串转化成JSON对象。这里我们需要用JS实现replaceAll的功能, 将所有的 ' \\" ' 替换成 ' " ' .
代码如下,这里的gm是固定的,g表示global,m表示multiple:

var jsonStr=jsonStr.replace(new RegExp('\\"',"gm"), '"' );

替换后的效果如下:

五、遍历JSON对象和JSON数组

1、遍历JSON对象

代码如下:

var packJson = {"name":"Liza", "password":"123"} ;

for(var k in packJson ){//遍历packJson 对象的每个key/value对,k为key
  alert(k + " " + packJson[k]);
}

效果图

2、遍历 JSON 数组

代码如下:

var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];

for(var i in packJson){//遍历packJson 数组时,i为索引
  alert(packJson[i].name + " " + packJson[i].password);
}

效果图

六、递归遍历

为了实现一些复杂功能常常需要递归遍历JSON对象,这里给出两个递归的例子,希望能给大家参考递归的写法。

1、第一个例子是递归遍历JSON,遇到数组的时候,数组中有超过一个对象,删除第一个对象之后的所有对象
举个例子,原始JSON如下:

期望处理后的JSON如下:

递归代码如下:

/**
 *返回处理后的 json字符串
 */
function jsonParse(jsonObj) {

   distinctJson(jsonObj);
   var last=JSON.stringify(jsonObj, undefined, 2);
   return last;
}

/**
 * 去掉 json中数组多余的项
 */
function distinctJson(obj) {
   if(obj instanceof Array) {
       if(obj.length > 1) { //数组中有超过一个对象,删除第一个对象之后的所有对象
         obj.splice(1, (obj.length - 1));
      }
      distinctJson(obj[0]);
   } else if(obj instanceof Object) {
       for( var index in obj){
          var jsonValue = obj[index];
         distinctJson(jsonValue);
      }
   }
}

2、第二个例子是递归查找目标节点(节点id为targetId,有且只有一个),找到后把targetChildren赋值给节点的children,
举个例子,原始JSON如下,查找的目标节点id为5:

targetChildren为

期望最后处理的JSON结果为:

递归代码如下:

/**
 * 递归查找目标节点
 */
function findTarget(obj,targetId,targetChildren){
  if(obj.id==targetId){
     obj.children=targetChildren;
     return true;
  }else{
     if(obj.children!=null){
        for(var i=0; i<obj.children.length; i++){
          var flag=findTarget(obj.children[i],targetId,targetChildren);
          if(flag==true){
             return true;
          }
        }
     }
  }
  return false;
}

到此这篇关于JS操作JSON常用方法(10w阅读)的文章就介绍到这了,更多相关JS操作JSON内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS对象与JSON格式数据相互转换

    目前的项目数据交互几乎都用JQuery,所以处理流程是:前端页面数据->JS对象->jQuery提交->python处理,另外一种就是倒过来.python肯定不能直接处理JS对象数据,所以要把JS对象转换成为python能处理的一种数据格式(通常是字典dict),同样,python取数据反馈到前端也要把字典数据转换成JS能处理的对象,这个中间转换数据格式通常就是JSON. 一.JS对象转换成为JSON 流程:读取前端页面数据,组装成为JS对象,并通过jQuery的$.post()方法传递

  • js中将字符串转换成json的三种方式

    ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐怕这是最早的解析方式了.如下: 复制代码 代码如下: function strToJson(str){ var json = eval('(' + str + ')'); return json; } 记得别忘了str两旁的小括号. 2,new Function形式,比较怪异哦.如下 复制代码 代码如

  • 解析JSON对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦,此时要按照类的格式或者 集合的形式进行传递. 例如:前台按类的格式传递JSON对象: var jsonUserInfo = "{\"TUserName\":\"" + userName + "\",\"TInterest\&qu

  • jquery JSON的解析方式

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: 复制代码 代码如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',valu

  • 10分钟学会js处理json的常用方法

    一.json定义 JSON ( JavaScript Object Notation) ,它是一串字符串 只不过元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "" 双引号内是属性或值 : 冒号表示后者是前者的值(这个值可以是字符串.数字.也可以是另一个数组或对象) JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中.数据由逗号分隔.花括号保存对象.方括号保存数组 JSON 值可以是:数字(整数或浮点数).字符串(在双引号中).逻

  • Json对象与Json字符串互转(4种转换方式)

    1>jQuery插件支持的转换方式: 复制代码 代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器: 复制代码 代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换

  • JQuery遍历json数组的3种方法

    一.使用each遍历 复制代码 代码如下: $(function () { var tbody = "";            //------------遍历对象 .each的使用-------------            //对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式,必须保证JSON的格式要求,回调的对象必须使用eval函数进行转化(否则将得不到Object).本文不作详细介绍服务器端回调的数据问题,我们将直接自定义对象)        

  • js 将json字符串转换为json对象的方法解析

    例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象 要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为

  • JSON.stringify 语法实例讲解

    认识javascript也不短的时间了,可是这个用法说实在的,我还是第一次见过,惭愧啊惭愧啊.于是乎,在网上找了写资料,写了些例子 希望能给园子们一些帮助. 作用:这个函数的作用主要是为了系列化对象的. 可能有些人对系列化这个词过敏,我的理解很简单.就是说把原来是对象的类型转换成字符串类型(或者更确切的说是json类型的).就这么简单.打个比方说,你有一个类,那么你可以通过这个方法转换成相应的json类型的.很简单吧. 接着看. 语法: JSON.stringify(value [, repla

  • JSONObject使用方法详解

    1.JSONObject介绍 JSONObject-lib包是一个beans,collections,maps,java arrays和xml和JSON互相转换的包. 2.下载jar包 http://xiazai.jb51.net/201707/yuanma/lib_jb51.rar 提供了除JSONObject的jar之外依赖的其他6个jar包,一共7个jar文件 说明:因为工作中项目用到的版本是1.1的对应jdk1.3的版本,故本篇博客是基于1.1版本介绍的. 对应此版本的javadoc下载

  • jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的each方法来遍历 用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符

随机推荐