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>