JSON 배열 (Array) 구문
[ "HTML", "CSS", "JS" ]
1.
JSON의 배열은 JS 배열과 거의 같음.
2.
JSON 배열 값은 아래 6가지 유형 중 하나여야 함.
string, number, object, array, boolean, null
3.
JSON 배열 값으로 아래 유형은 올 수 없음. (cf. JS 배열 경우엔 가능)
function, date, undefined
JSON 객체의 배열 값 접근 (낱개)
<p id="hz"></p>
<script>
var myObj, x;
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code":[ "HTML", "CSS", "JS" ]
};
x = myObj.code[0]; // 배열 접근법 - 대괄호 이용
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
※ 배열은 JSON 객체 값 가능.
※ 대괄호를 이용한 인덱스 번호로 배열값에 접근.
JSON 객체의 배열 값 접근 (전체) : for-in 구문 이용
<p id="hz"></p>
<script>
var myObj, i, x = "";
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code":[ "HTML", "CSS", "JS" ]
};
for (i in myObj.code) {
x += myObj.code[i] + "<br>";
}
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
CSS
JS
※ 주의: 핑크색 부분이 없으면 출력 안 됨.
JSON 객체의 배열 값 접근 (전체) : for문 이용
<p id="hz"></p>
<script>
var myObj, i, x = "";
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code":[ "HTML", "CSS", "JS" ]
};
for (i = 0; i < myObj.code.length; i++) {
x += myObj.code[i] + "<br>";
}
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
CSS
JS
JSON 객체 내 중첩 배열 접근 ★
<p id="hz"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code": [
{"lang":"HTML", "role":["기본틀", "뼈대"]},
{"lang":"CSS", "role":["디자인", "의복"]},
{"lang":"JS", "role":["동작", "기능"] }
]
}
for (i in myObj.code) {
x += "<h2>" + myObj.code[i].lang + "</h2>";
for (j in myObj.code[i].role) {
x += myObj.code[i].role[j] + "<br>";
}
}
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
기본틀
뼈대
CSS
디자인
의복
JS
동작
기능
JSON 객체의 배열 수정
<p id="hz"></p>
<script>
var myObj, i, x = "";
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code":[ "HTML", "CSS", "JS" ]
};
myObj.code[2] = "PHP";
for (i in myObj.code) {
x += myObj.code[i] + "<br>";
}
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
CSS
PHP
JSON 객체의 배열 삭제
<p id="hz"></p>
<script>
var myObj, i, x = "";
myObj = {
"site":"홈짱닷컴 Homzzang.com",
"open":2012,
"code":[ "HTML", "CSS", "JS" ]
};
delete myObj.code[2];
for (i in myObj.code) {
x += myObj.code[i] + "<br>";
}
document.getElementById("hz").innerHTML = x;
</script>
결과보기
HTML
CSS
