前端json格式的介绍，转换以及解析

近几日碰到json的问题比较多，我这里做一个总结，比较浅显简单，希望能对那些前端小白有所帮助，能对json有一个认识，并且能简单的处理json格式的内容。

例如最近碰到一个项目，项目需求如下：

用户选择一级下拉菜单，二级联动，动态加载内容到二级菜单，并在下方内容处，随着用户下拉菜单选择的内容动态加载相应内容。

实现的方法其实比较简单：

select部分：一级菜单选择内容，ajax动态加载，因为内容固定（地名类），我这里所以直接解析json，写入内容到option里面，并且动态生成，其实是不太规范的。通常项目二级联动部分里面下拉菜单的内容是时常变化的，正确的操作应该如下：一级菜单select选择内容，马上ajax传值到后端，后端相应的查表，返回json格式数据到前端，前端解析，并写入内容到option里面。
下方内容处的动态生成：与二级联动类似，一级菜单或者二级菜单select选择内容，马上ajax传值到后端，后端相应的查表，返回json格式数据到前端，前端解析，并写入内容到下方内容填充处。实现无刷新页面动态生成。

绕来绕去，前后端的联系都离不开 json 和 xml，而 json
和 javescript 简直是天造地设的一对，json 的优点我就不叙述了。

下面简单总结下json的相关用法，有三块内容：

1、JSON的基本数据格式     2、json字符串转json格式     3、json格式转json字符串。

一、JSON的基本数据格式

1.JSON对象（JSONObject）

简单一点的：

{"name":"西兰花的春天" , "age":26 , "male":true}

复杂一点：

{
"name":"西兰花的春天",
"age":"26",
"male":"true",
"company":{ "name":"Helen", "city":"杭州", "country":"中国" }
}

2.JSON数组（JSONArray ）

简单一点的：

[
{ "name":"陈总", "age":"40", "male":"true" },
{ "name":"孙xx", "age":"24", "male":"false" },
{ "name":"高xx", "age":"30", "male":"true" },
{ "name":"陈xx", "age":"30", "male":"true" },
{ "name":"张xx", "age":"30", "male":"true" }
]

复杂一点的:

{
"helen":{
"技术部":[
{
"人员":"5",
"男人":"4",
"女人":"1",
"人员构成":{
"带头大哥":{ "技术总监":"陈xx" },
"前端":[
{
"前端1":"孙美女",
"前端1特点":"技术天才",
"前端2":"西兰花的春天",
"前端2特点":"技术大天才"
}
],
"后端":[
{
"后端1":"陈xx",
"后端1特点":"技术疯子",
"后端2":"张xx",
"后端2特点":"技术疯子"
}
]
}
},
{
"人员":"2",
"男人":"2",
"女人":"0",
"人员构成":{
"带头大哥":{ "运营总监":"张xx" },
"运营":[
{
"运营1":"孙xx",
"运营1特点":"技术天才",
}
]
}
}
]
}

json 的数据格式严格意义上应该遵守其规则，键和值加引号，该加中括号加中括号，改加大括号加大括号，错误的书写直接导致后面解析方法 JSON.parse()报错，当然了，eval('(' + str + ')')则会通过，详情看后面的json解析。
二、json对象和json字符串的转换

1. 首先要明白什么是json对象，什么是json字符串。

json格式：

{"name":"西兰花的春天" , "age":26 , "male":true}

json字符串格式：

'{"name":"西兰花的春天" , "age":26 , "male":true}'

可以看出它们的区别在于外面多了一对引号，json字符串之所以叫json字符串，因为字符串的格式符合json的格式，所以叫做json字符串，可以alert（typeof（xxx））一下，
   结果也是：string。

2. json字符串转json对象

（1）调用parse方法：

var jsonString='{"name":"西兰花的春天","age":"26"}' //json字符串
var ToObject=JSON.parse(jsonString);
console.log(bToObject.name);//西兰花的春天

这里注意一下:
浏览器(Firefox，chrome，opera，safari，ie9，ie8)支持parse方法转换，而ie8兼容。ie7，ie6则需要加载一个json2.js的脚本文件，则可以使用stringify()和parse()方法。

下载链接：https://github.com/douglascrockford/JSON-js
（2）调用eval方法：

var jsonString = '{"name":"西兰花的春天","age":"26"}' //json字符串
var ToObject = eval( '(' + jsonString + ')' );
console.log( bToObject.name );//西兰花的春天

（3）jQuery插件支持的转换方式： 

$.parseJSON() :     jQuery.parseJSON(),可以将json字符串转换成json对象 

var jsonString = '{"name":"西兰花的春天","age":"26"}' //json字符串
console.log( $.parseJSON( jsonString ).name );//西兰花的春天

还有许多方法，如js的方法解析，这里不多做论述，目前parse方法用的比较多，这里讲一下eval：

先放一个链接，https://www.zhihu.com/question/20591877，你可以去评判下eval的好坏。我的理念是，程序的编写应该有点哲学的思想，万物无绝对，辩证的看问题才是最客观的，不偏不倚，前端有时候带点中庸思想不会错。

好了，这里我只讲json里用到eval的好坏。

好处：eval太强大，什么都能给你解析出来。
缺点：错误的json格式也可以解析出来，不安全，很容易让一些用户在json字符串中注入了向页面插入木马链接的脚本。

如下：

var jsonString = "{ name:'西兰花的春天',age:'26',}";
var obj = eval( '(' + jsonString + ')' );
console.log( obj );

输出结果：



我这里json字符串格式都是错误的，单引号，无引号，句末有逗号，结果还是成功输出。

在看一例：

var jsonString = '{ name:"西兰花的春天",age:alert("西兰花的春天")}';
var obj = eval( '(' + jsonString + ')' );
console.log( obj );

结果出现弹窗，并且打印出结果





可见eval还是有点不好的，包容错误造成不必要的麻烦。

下面看一个我项目中的例子:

json:

{
"helen":{
"技术部":[
{
"人员":"5",
"男人":"4",
"女人":"1",
"人员构成":{
"带头大哥":{ "技术总监":"陈xx" },
"前端":[
{
"前端1":"孙美女",
"前端1特点":"技术天才",
"前端2":"西兰花的春天",
"前端2特点":"技术大天才"
}
],
"后端":[
{
"后端1":"陈xx",
"后端1特点":"技术疯子",
"后端2":"张xx",
"后端2特点":"技术疯子"
}
]
}
}
]
}
}

js:

<script>
$( document ).ready( readyHandler );
function readyHandler()
{
$.get( "helen.json", function( data )
{
console.log( data );

	console.log( data.helen.技术部[ 0 ].人员构成.前端[ 0 ].前端2 );

} ); } </script>
我这里直接读取的项目文件下的json文件里的内容，内容为json数据格式，不用解析，直接可以拿来用，怎么在复杂的json格式里取到我想要的值，其实很简单。

我前几日碰到json数组数组格式或者复合格式的就出错，苦于怎么取值，后来研究了一会明白一个道理：

复杂的json里有JSON对象和json数组，取对象我们直接.xxx就可以了，取数组那一层其实只要.xx[i]即可，一层一层剥离下去，细心点就不会错，明白这个道理就举一反三了，也没什么难得，就这么回事。

三、json格式转json字符串

好了，有去就有回，有来就有往，json格式当然也可以转json字符串，就这么几个方法，如下：

1.使用toJSONString()

var jsonObj = {"name":"西兰花的春天" , "age":26 , "male":true};
var jsonString  = jsonObj.toJSONString();//将JSON对象转化为JSON字符
alert(jsonString);

2.全局方法JSON.stringify()

var jsonObj = { "name": "西兰花的春天", "age": 26, "male": true };
var jsonString = JSON.stringify( jsonObj );//将JSON对象转化为JSON字符
alert( jsonString );

注意：在ie6，ie7，ie8兼容模式下，要加载json2.js 脚本，他们方法都来自json.js包，其他高版本ie或其他高版本浏览器不加载json2.js 也可正常运行全局方JSON.stringify()，而toJSONString()执行则要求加载json2.js 脚本。

好了，以上就是我关于json的总结，比较具体，涉及到复杂问题则要具体事例具体解决了，json格式的处理其实很简单，我这里也就不啰嗦了，若有出错之处，还望指出。