日期:2014-05-16  浏览次数:20403 次

JSON数据与JavaScript对象转换

使用JSON时,最基本的工作就是JSON数据与JavaScript对象之间的互相转换。如浏览器

从服务器端获得JSON数据,然后转换为JavaScript对象在网页输出。

?

JSON: JavaScript Object Notation,JSON数据格式语法就是JavaScript创建对象的代码语法,所以可以使用JavaScript内建的eval()函数直接将JSON数据转换为JavaScript对象。如下:

?

1. JSON数据示例
{
	"employees": [{
		"firstName": "John",
		"lastName": "Doe"
	},
	{
		"firstName": "Anna",
		"lastName": "Smith"
	},
	{
		"firstName": "Peter",
		"lastName": "Jones"
	}]
}

?

?2.?JSON数据转换为JavaScript对象

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

var obj = eval ("(" + txt + ")");

console.log(obj.employees[1].firstName);

?使用eval()函数时,必须为传入的JSON数据参数添加括号'()',否则会报语法错误。但eval()的问题在于,除了可以解析JSON数据,也可以用于执行JavaScript脚本片段,这就会带来潜在的安全问题。JSON提供了专门的JSON Parser来实现只用于解析JSON数据,不会执行scripts脚本,而且速度更快。如下:

obj = JSON.parse(txt);

?在现在的浏览器中,如IE8, Firefox3.5, Chrome等以上版本,都提供了原生JSON解析器的支持,而且也是ECMAScript (JavaScript)的最新标准。因此,JSON Parser可以在JavaScript代码中是直接调用。

?

?3.?JavaScript对象转换为JSON数据

var txt = JSON.stringify(obj);

?使用JSON.strigify()函数,将Javascript对象转换为JSON文本数据。

?

4. JSON数据转换示例?

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(txt);

document.getElementById("fname").innerHTML=obj.employees[2].firstName 
document.getElementById("lname").innerHTML=obj.employees[2].lastName 

alert("JSON Data: \n" + JSON.stringify(obj));
</script>
</body>
</html>

?

?