JSON 객체의 간단한 활용 예제
아래의 내용은 제이슨 객체의 정보를 화면에 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트에서 제이슨 활용</h2>
<p>
이름: <span id="jname"></span><br />
나이: <span id="jage"></span><br />
주소: <span id="jstreet"></span><br />
전화번호: <span id="jphone"></span><br />
</p>
<script>
var JSONObject= {
"name":"홍길동",
"street":"경남 진주시 평거동 111-11",
"age":47,
"phone":"010-2666-7874"};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jage").innerHTML=JSONObject.age
document.getElementById("jstreet").innerHTML=JSONObject.street
document.getElementById("jphone").innerHTML=JSONObject.phone
</script>
</body>
</html>
아래의 예제는 제이슨 표현 방식으로 작성된 문자열을 제이슨 객체로 전환하여 표시하는 예제입니다. 이 예제는 서버로부터 자료를 전송받아 화면에 표시할 때 매우 유용합니다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트에서 제이슨 활용(2)</h2>
<p>
First Name: <span id="fname"></span><br>
Last Name: <span id="lname"></span><br>
</p>
<script>
var txt = '{"employees":[{"firstName":"장","lastName":"성현" },{"firstName":"이","lastName":"창희" },{"firstName":"박","lastName":"영수" }]}';
var obj = eval ("(" + txt + ")");
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>