1. 程式人生 > >js 控制json在html中顯示

js 控制json在html中顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>json資料植入html的演示</title>
</head>

<body>
<div>
<h2>在 JavaScript 中建立 JSON 物件</h2>

<p>
Name: <span id="jname"></span><br />
Age: <span id="jage"></span><br />
Address: <span id="jstreet"></span><br />
Phone: <span id="jphone"></span><br />
</p>

<script type="text/javascript">
var JSONObject= {
"name":"Bill Gates",
"street":"Fifth Avenue New York 666",
"age":56,
"phone":"555 1234567"};

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

var obj = eval ("(" + txt + ")");
var employes = eval(obj.employees)
for(var i=0; i<employes.length; i++){ 
document.getElementById("jname").innerHTML=obj.employees[1].firstName
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
var idata ="<input value=\""+obj.employees[i].firstName+"\" />"
document.write(idata);}
</script>
shemen
</div>
</body>
</html>