[JSON] JS - JSON - Object (객체)

1. JSON 객체 구문
2. JSON 객체의 값(value) 접근
3. JSON 객체의 키(key) 출력
4. JSON 객체의 값(value) 출력
5. JSON 중첩 객체
6. JSON 객체의 값(value) 수정
7. JSON 객체의 키(key) 삭제

JSON 객체 구문

 

myObj = { "site":"홈짱닷컴 homzzang.com", "open":2012, "close":null };

---

[JSON 구문 특징]

 

• JSON 객체는 중괄호( { } )로 묶음.
• JSON 객체는 키:값 쌍으로 작성.
• 키는 문자열이어야하며, 값은 유효한 JSON 데이터 유형이여야 함. (문자열, 숫자, 객체, 배열, 참거짓 , null) https://homzzang.com/b/js-92
• 키와 값은 콜론( : )으로 구분.
• 각 키:값 쌍은 쉼표( , )로 구분.

 

JSON 객체의 값(value) 접근

[방법1] - JSON객체변수.키

 

<p id="hz"></p>

<script>

var myObj, x;

myObj = { "site":"홈짱닷컴 homzzang.com", "open":2012, "close":null };

x = myObj.site;

document.getElementById("hz").innerHTML = x;

</script>

 

결과보기

---

[방법2] - JSON객체변수["키"]

 

<p id="hz"></p>

<script>

var myObj, x;

myObj = { "site":"홈짱닷컴 homzzang.com", "open":2012, "close":null };

x = myObj["site"];

document.getElementById("hz").innerHTML = x;

</script>

 

결과보기

JSON 객체의 키(key) 출력

※ for-in 반복문 이용

<p id="hz"></p>

<script>

var myObj, x;

myObj = { "site":"홈짱닷컴 homzzang.com", "open":2012, "close":null };

for (x in myObj) {

  document.getElementById("hz").innerHTML += x + "<br>";

}

</script>

 

결과보기

site

open

close

JSON 객체의 값(value) 출력

※ for-in 반복문에서 대괄호 이용

<p id="hz"></p>

<script>

var myObj, x;

myObj = { "site":"홈짱닷컴 homzzang.com", "open":2012, "close":null };

for (x in myObj) {

  document.getElementById("hz").innerHTML += myObj[x] + "<br>";

}

</script>

결과보기

홈짱닷컴 homzzang.com

2012

null

JSON 중첩 객체

※ JSON 객체 값으로 또 다른 객체가 온 경우에 해당.

 

<p id="hz1"></p>

<p id="hz2"></p>

<script>

var myObj = {

  "site":"홈짱닷컴 Homzzang.com",

  "open":2012,

  "code": {

  "HTML":"기본틀",

  "CSS":"디자인",

  "JS":"동작기능"

  }

}

// 방법1

document.getElementById("hz1").innerHTML += myObj.code.HTML ;

// 방법2

document.getElementById("hz2").innerHTML += myObj.code["HTML"];

</script>

결과보기

기본틀

기본틀

JSON 객체의 값(value) 수정

 

<p id="hz"></p>

<script>

var myObj, i, x = "";

var myObj = {

  "site":"홈짱닷컴 Homzzang.com",

  "open":2012,

  "code": {

  "HTML":"기본틀",

  "CSS":"디자인",

  "JS":"동작기능"

  }

}

myObj.code.HTML = "뼈대"; // 방법1 - 마침표 이용

myObj.code["CSS"] = "의복"; // 방법2 - 대괄호 이용

  

for (i in myObj.code) {

  x += myObj.code[i] + "<br>";

}

document.getElementById("hz").innerHTML = x;

</script>

 

결과보기

뼈대
의복
동작기능

※ 주의; 핑크색 라인 없으면 출력 안 됨.

JSON 객체의 키(key) 삭제

 

<p id="hz"></p>

<script>

var myObj, i, x = "";

var myObj = {

  "site":"홈짱닷컴 Homzzang.com",

  "open":2012,

  "code": {

  "HTML":"기본틀",

  "CSS":"디자인",

  "JS":"동작기능"

  }

}

delete myObj.code.JS;

  

for (i in myObj.code) {

  x += myObj.code[i] + "<br>";

}

document.getElementById("hz").innerHTML = x;

</script>

 

결과보기

기본틀

디자인