JSON数据常用的数据处理方法:
一、JSON对象和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);
console.log(jsonObject) //{name:"Liza",password:"123"}
2.JSON对象转化JSON字符串
var jsonstr =JSON.stringify(jsonObject );
console.log(jsonstr) //{"name":"Liza", "password":"123"}
二、JSON的输出美化
JSON.stringify(value[, replacer [, space]])
将JSON转化为字符串可以用JSON.stringify() 方法,stringify还有个可选参数space,可以指定缩进用的空白字符串,用于美化输出(pretty-print);
space参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数没有提供(或者为null)将没有空格。
执行下面代码:
var jsonObject = {"root":{"id":"1","text":"复选框","layout":"map","children":[{"id":"1.1","text":"必填项验证","side":"right"},
{"id":"1.2","text":"选中后状态","side":"left"},{"id":"1.3","text":"未选择状态,默认显示样式","side":"middle"}]}};
var formatJsonStr = JSON.stringify(jsonObject,undefined,2);
console.log(formatJsonStr);
//输出如下:
{
"root": {
"id": "1",
"text": "复选框",
"layout": "map",
"children": [
{
"id": "1.1",
"text": "必填项验证",
"side": "right"
},
{
"id": "1.2",
"text": "选中后状态",
"side": "left"
},
{
"id": "1.3",
"text": "未选择状态,默认显示样式",
"side": "middle"
}
]
}
}
三、JSON字符串的替换
可能遇到的字符串:
var jsonstr = '{\"root\":{\"id\":\"1\",\"text\":\"复选框\",\"layout\":\"map\",\"children\":[{\"id\":\"1.1\",\"text\":\"必填项验证\",\"side\":\"right\"},{\"id\":\"1.2\",\"text\":\"选中后状态\",\"side\":\"left\"},{\"id\":\"1.3\",\"text\":\"未选择状态,默认显示样式\",\"side\":\"middle\"}]}}';
需要经过替换后,才能从字符串转化成JSON对象。这里我们需要用JS实现replaceAll的功能, 将所有的 ' \\" ' 替换成 ' " ' .
代码如下,这里的gm是固定的,g表示global,m表示multiple:
var jsonStr = jsonstr.replace(new RegExp('\\"',"gm"),'"');
console.log(jsonStr)
//{"root":{"id":"1","text":"复选框","layout":"map","children":[{"id":"1.1","text":"必填项验证","side":"right"},{"id":"1.2","text":"选中后状态","side":"left"},{"id":"1.3","text":"未选择状态,默认显示样式","side":"middle"}]}}
四、遍历JSON对象和JSON数组
1、遍历JSON对象代码如下:
var packJson = {"name":"Liza", "password":"123"} ;
for(var k in packJson ){ //遍历packJson 对象的每个key/value对,k为key
console.log(k + " " + packJson[k]);
}
//name Liza
// password 123
2、遍历JSON数组代码如下:
var packJson = [{"name":"Liza", "password":"123"}, {"name":"Mike", "password":"456"}];
for(var i in packJson){ //遍历packJson 数组时,i为索引
console.log(packJson[i].name + " " + packJson[i].password);
}
//Liza 123
// Mike 456
五、递归遍历
为了实现一些复杂功能常常需要递归遍历JSON对象,这里给出两个递归的例子,希望能给大家参考递归的写法。
1、第一个例子是递归遍历JSON,遇到数组的时候,数组中有超过一个对象,删除第一个对象之后的所有对象
举个例子,原始JSON如下:
{
"root": {
"id": "1",
"text": "复选框",
"layout": "map",
"children": [
{
"id": "1.1",
"text": "必填项验证",
"side": "right",
"children": [
{
"id": "1.1.1",
"text": "是"
},
{
"id": "1.1.2",
"text": "否,只能选择"
}
]
},
{
"id": "1.2",
"text": "选中后状态",
"side": "left"
}
]
}
}
期望处理后的JSON如下:
{
"root": {
"id": "1",
"text": "复选框",
"layout": "map",
"children": [
{
"id": "1.1",
"text": "必填项验证",
"side": "right",
"children": [
{
"id": "1.1.1",
"text": "是"
}
]
}
]
}
}
递归代码如下:
/**
*返回处理后的 json字符串
*/
function jsonParse(jsonObj) {
distinctJson(jsonObj);
var last=JSON.stringify(jsonObj, undefined, 2); //优化json数据
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]; //接收values值
distinctJson(jsonValue);
}
}
}
2、第二个例子是递归查找目标节点(节点id为targetId,有且只有一个),找到后把targetChildren赋值给节点的children,
举个例子,原始JSON如下,查找的目标节点id为5:
var obj ={
"id": "1",
"text": "复选框",
"children": [
{
"id": "2",
"text": "层级关联,不选择上一层级下拉框无法选择"
},
{
"id": "3",
"text": "是否可以手动输入",
"children":[
{
"id": "4",
"text": "是",
"children":[
{
"id": "5",
"text": "检索出符合条件的结果优先展示"
} ,
{
"id": "6",
"text": "大小写区分"
}
]
}
]
}
]
};
var targetChildren = [{
"id": "7",
"text": "关联下拉框,选择此下拉框内容"
},
{
"id": "8",
"text": "选中下拉框后显示下拉框内容"
}];
而想要的结果是
{
"id": "1",
"text": "复选框",
"children": [
{
"id": "2",
"text": "层级关联,不选择上一层级下拉框无法选择"
},
{
"id": "3",
"text": "是否可以手动输入",
"children": [
{
"id": "4",
"text": "是",
"children": [
{
"id": "5",
"text": "检索出符合条件的结果优先展示",
"children": [
{
"id": "7",
"text": "关联下拉框,选择此下拉框内容"
},
{
"id": "8",
"text": "选中下拉框后显示下拉框内容"
}
]
},
{
"id": "6",
"text": "大小写区分"
}
]
}
]
}
]
}
/**
* 递归查找目标节点
*/
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
}
findTarget(obj,5,targetChildren);
var last = JSON.stringify(obj,undefined,2);
console.log(last);