JSON - JSON 표기법의 기본

1. object 방식
1) object 출력
<script language="JavaScript">
<!--
  var myJSONObject = {
    "test" : "hello"
  }
//-->
</script>
<form>
  <input type = "button" onclick="alert(typeof myJSONObject)" value="click">
</form>

출력결과 : object형태이기 때문에 "object" 가 출력된다.

2) property 출력
<script language = "JavaScript">
<!--
  var myJSONObject2 = {
    "test": "hello"
  }
//-->
</script>
<form>
  <input type = "button" onclick = "alert( myJSONObject2 )" value = "click">           <!-- 출력결과 : object Object -->
  <input type = "button" onclick = "alert( myJSONObject2.test )" value = "click">     <!-- 출력결과 : hello -->
  <input type = "button" onclick = "myJSONObject2.test = 'new test' ; alert(myJSONObject2.test )" value = "click">  <!--출력결과 : new test -->
  <input type = "button" onclick="alert(myJSONObject2.test)" value="click"/>          <!-- 출력결과 : hello -->
</form>

세번째줄과 같이 myJSONObject2.test에 새로운 문자열 new test를 입력하고 출력하면 new test가 출력 되지만 다시 출력하면 JSON에서 선언한 기본 데이터인 hello가 출력된다.

3) property가 두개 이상인 경우

<script language="JavaScript">
<!--
  var myJSONObject3 = {
    "test1": "hello1",
    "test2": "hello2", 
    "test3":"hello3"
  }
//-->
</script>
<form>
  <input type="button" onclick="alert(myJSONObject3.test1)" value="click">     <!-- 출력결과 : hello1 -->
  <input type="button" onclick="alert(myJSONObject3.test2)" value="click">     <!-- 출력결과 : hello2 -->
  <input type="button" onclick="alert(myJSONObject3.test3)" value="click">     <!-- 출력결과 : hello3 -->
</form>

각각의 property들은 ,(콤마) 로 구분한다.

4) 메소드 방식
<script language="JavaScript">
<!--
  var myJSONObject4 = {
    "test1" : "function() { alert('This is method test1') }"
  }
//-->
</script>

<form>
  <input type="button" onclick="eval('a=' + myJSONObject4.test1); a()" value="click">  <!-- 출력결과 : This is method test1 -->
</form>

eval은 javascript 메소드로서 전달인자를 function 으로 사용할 수 있게 한다.  a= 에 test1의 메소드가 대입되고 a(); 란 명령으로 json의 test1 function을 호출한다.

5) 메소드 방식(전달 인자가 있을 때)
<script language="JavaScript">
<!--
  var myJSONObject5 = {
    "test2" : "function(arg) { alert('This is argument : ' + arg) } "
  }
//-->
</script>
<form>
  <input type="button" onclick="eval('var a=' + myJSONObject5.test2 + ''); a('hello');" value="click">
  <input type="button" onclick="eval('(' + myJSONObject5.test2+')(\'hello\')');" value="click">
</form>

둘다 모두 hello가 출력된다.

6) 중첩된 object
<script language="JavaScript">
var obj7 = {
    "test" : {
      "name" : "k2club",
      "id" : 123
    }
  }
</script>
<input type="button" onclick="alert(typeof obj7.test)" value="click"> 
<input type="button" onclick="alert(obj7.test.name)" value="click">     <!-- 출력결과 : k2club -->
<input type="button" onclick="alert(obj6.test.id)" value="click">           <!-- 출력결과 : 123 -->

object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

2. Array 방식
1)1차원 배열
<script language="JavaScript">
<!--
  var obj5 = [
    "test"
  ]
//-->
</script>

<input type="button" onclick="alert(typeof obj5[0])" value="click">
<input type="button" onclick="alert(obj5[0])" value="click">


2) 2차원 배열
<script language="JavaScript">
<!--
  var obj6 = {
    "test" : [
      "ccc", "ddd"
    ] 
  }
//-->
</script>

<input type="button" onclick="alert(obj6.test[0])" value="click">   <!-- 출력결과 : ccc -->
<input type="button" onclick="alert(obj6.test[1])" value="click">   <!-- 출력결과 : ddd -->
다음과 같이 배열은 [] 으로 표현하며 [index]로 접근할 수 있다.