J-한솔넷

JSON 객체의 간단한 활용 예제 본문

웹 개발관련

JSON 객체의 간단한 활용 예제

jhansol 2013. 1. 18. 22:08

아래의 내용은 제이슨 객체의 정보를 화면에 표시하는 예제입니다.


<!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>


저작자표시

'웹 개발관련' 카테고리의 다른 글

그누보드의 로그인화면에서 내가 만든 상단 하단 내용 표시하기 #1  (0) 2013.01.28
레이어로 표현하는 팝업  (0) 2013.01.24
JSON 개요  (0) 2013.01.18
tab 안에 또다른 텝 표시  (0) 2013.01.18
웹 접근성 향상을 위한 국가 표준 기술 가이드 라인  (0) 2013.01.15
'웹 개발관련' Related Articles more