• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
String JS - toUpperCase() 메서드 - 대문자로 변환
String JS - trim() 메서드 ★ - 문자열양쪽 공백제거 (= trim메서드 = 트림 메서드)
String JS - valueOf() 메서드 - 객체값 (문자열자체 = 밸류어브)
String JS - anchor() 메서드 - name 속성 갖는 앵커태그 (= 링크태그) (비표준)
String JS - big() 메서드 - 큰글씨 (= 큰글자 = 글자 크게) (비표준)
String JS - blink() 메서드 - 글자 깜빡임. (비표준)
String JS - bold() 메서드 - 굵은글씨 (= 글자 굵게) (비표준)
String JS - fixed() 메서드 - 텔레타이프 텍스트 (비표준)
String JS - fontcolor() 메서드 - 글자색깔 (비표준)
String JS - fontsize() 메서드 - 글자크기 (비표준)
String JS - italics() 메서드 - 이탤릭체 (비표준)
String JS - link() 메서드 - src 속성 갖는 앵커태그 (= 링크태그) (비표준)
String JS - small() 메서드 - 작은글씨 (= 글자 작게) (비표준)
String JS - strike() 메서드 - 취소선 (= strike메서드 = 스트라이크메서드, HTML5제외)
String JS - sub() 메서드 - 아래첨자 (비표준) (= sub메서드 = 서브메서드)
String JS - sup() 메서드 - 위첨자 (비표준)
Number JS - Number -
Number JS - constructor - 객체생성자함수 (숫자 경우)
Number JS - MAX_VALUE - JS최대값 (= JS에서 가장큰수)
Number JS - MIN_VALUE - JS최소값 (= JS가장작은값)
7/67
목록
찾아주셔서 감사합니다. Since 2012