[JSON] JS - JSON - Array (배열)

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