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);
网友评论