목차
- JSON 객체 구문
- JSON 객체의 값(value) 접근
- JSON 객체의 키(key) 출력
- JSON 객체의 값(value) 출력
- JSON 중첩 객체
- JSON 객체의 값(value) 수정
- 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>
결과보기
기본틀
디자인
