javascript_解析json对象

最新推荐文章于 2024-06-24 17:11:28 发布

fightingcoder419

最新推荐文章于 2024-06-24 17:11:28 发布

阅读量1.8k

点赞数 1

文章标签： javascript解析json对象 json

本文链接：https://blog.csdn.net/fightingcoder419/article/details/52344782

版权

javascript解析json多个对象和单个对象

若为json多个对象，如下例所示：

var people= { "programmers": [{ "firstName": "Brett","lastName":"McLaughlin", "email":"aaaa" },
		{"firstName": "Jason","lastName":"Hunter", "email": "bbbb" },
		{"firstName": "Elliotte","lastName":"Harold", "email": "cccc" }
		],
		"authors":[
		{"firstName": "Isaac", "lastName":"Asimov", "genre": "science fiction" },
		{"firstName": "Tad", "lastName":"Williams", "genre": "fantasy" },
		{"firstName": "Frank", "lastName":"Peretti", "genre": "christian fiction" }
		],
		"musicians":[
		{"firstName": "Eric", "lastName":"Clapton", "instrument": "guitar" },
		{"firstName": "Sergei", "lastName":"Rachmaninoff", "instrument": "piano" }
		] };

那么访问解析其中的对象的方式是：people.programmers[i].firstName

若为json单个个对象，如下例所示：

var programmers=[{ "firstName": "Brett","lastName":"McLaughlin", "email":"aaaa" },
		{"firstName": "Jason","lastName":"Hunter", "email": "bbbb" },
		{"firstName": "Elliotte","lastName":"Harold", "email": "cccc" }];

那么访问解析其中的对象的方式是： programmers[i].firstName

具体在html中的解析代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
<body>
	<h2>在 JavaScript中解析JSON 对象</h2>
	<div style="float: left;">
		<input type="button" value="解析多种json对象" id="btnmutiple" οnclick="jsonmutiple()"/><br/>
		programmersfirstName: <span id="programmersfirstName0"></span><br />
		programmerslastName: <span id="programmerslastName0"></span><br />
		programmersemail: <span id="programmersemail0"></span><br />
		programmersfirstName: <span id="programmersfirstName1"></span><br />
		programmerslastName: <span id="programmerslastName1"></span><br />
		programmersemail: <span id="programmersemail1"></span><br />
		programmersfirstName: <span id="programmersfirstName2"></span><br />
		programmerslastName: <span id="programmerslastName2"></span><br />
		programmersemail: <span id="programmersemail2"></span><br />
		authorsfirstName: <span id="authorsfirstName0"></span><br />
		authorslastName: <span id="authorslastName0"></span><br />
		authorsgenre: <span id="authorsgenre0"></span><br />
		authorsfirstName: <span id="authorsfirstName1"></span><br />
		authorslastName: <span id="authorslastName1"></span><br />
		authorsgenre: <span id="authorsgenre1"></span><br />
		authorsfirstName: <span id="authorsfirstName2"></span><br />
		authorslastName: <span id="authorslastName2"></span><br />
		authorsgenre: <span id="authorsgenre2"></span><br />
		programmersfirstName: <span id="musiciansfirstName0"></span><br />
		programmerslastName: <span id="musicianslastName0"></span><br />
		programmersinstrument: <span id="musiciansinstrument0"></span><br />
		programmersfirstName: <span id="musiciansfirstName1"></span><br />
		programmerslastName: <span id="musicianslastName1"></span><br />
		programmersinstrument: <span id="musiciansinstrument1"></span><br />
	</div>
	<div style="margin-left: 500px;">
		<input type="button" value="解析一种json对象" id="btnsingle"  οnclick="jsonsingle()"/><br/>
		firstName: <span id="firstName0"></span><br />
		lastName: <span id="lastName0"></span><br />
		email: <span id="email0"></span><br />
		firstName: <span id="firstName1"></span><br />
		lastName: <span id="lastName1"></span><br />
		email: <span id="email1"></span><br />
		firstName: <span id="firstName2"></span><br />
		lastName: <span id="lastName2"></span><br />
		email: <span id="email2"></span><br />
	</div>
</body>
	<script type="text/javascript">
	function jsonmutiple(){
		var people= { "programmers": [{ "firstName": "Brett","lastName":"McLaughlin", "email":"aaaa" },
		{"firstName": "Jason","lastName":"Hunter", "email": "bbbb" },
		{"firstName": "Elliotte","lastName":"Harold", "email": "cccc" }
		],
		"authors":[
		{"firstName": "Isaac", "lastName":"Asimov", "genre": "science fiction" },
		{"firstName": "Tad", "lastName":"Williams", "genre": "fantasy" },
		{"firstName": "Frank", "lastName":"Peretti", "genre": "christian fiction" }
		],
		"musicians":[
		{"firstName": "Eric", "lastName":"Clapton", "instrument": "guitar" },
		{"firstName": "Sergei", "lastName":"Rachmaninoff", "instrument": "piano" }
		] };
		for(var i=0;i<people.programmers.length;i++){
			//alert(people.programmers[i].firstName);
			document.getElementById("programmersfirstName"+i).innerHTML=people.programmers[i].firstName;
			document.getElementById("programmerslastName"+i).innerHTML=people.programmers[i].lastName;
			document.getElementById("programmersemail"+i).innerHTML=people.programmers[i].email;
		}
		for(var i=0;i<people.authors.length;i++){
			//alert(people.authors[i].firstName);
			document.getElementById("authorsfirstName"+i).innerHTML=people.authors[i].firstName;
			document.getElementById("authorslastName"+i).innerHTML=people.authors[i].lastName;
			document.getElementById("authorsgenre"+i).innerHTML=people.authors[i].genre;
		}
		for(var i=0;i<people.musicians.length;i++){
			//alert(people.musicians[i].firstName);
			document.getElementById("musiciansfirstName"+i).innerHTML=people.musicians[i].firstName;
			document.getElementById("musicianslastName"+i).innerHTML=people.musicians[i].lastName;
			document.getElementById("musiciansinstrument"+i).innerHTML=people.musicians[i].instrument;
		}
	}
	function jsonsingle(){
		var programmers=[{ "firstName": "Brett","lastName":"McLaughlin", "email":"aaaa" },
		{"firstName": "Jason","lastName":"Hunter", "email": "bbbb" },
		{"firstName": "Elliotte","lastName":"Harold", "email": "cccc" }];
		for(var i=0;i<programmers.length;i++){
			//alert(programmers.length);
			//alert(programmers[i].firstName);
			document.getElementById("firstName"+i).innerHTML=programmers[i].firstName;
			document.getElementById("lastName"+i).innerHTML=programmers[i].lastName;
			document.getElementById("email"+i).innerHTML=programmers[i].email;
		}
	}
	</script>
</html>