[jQuery] 제이쿼리 JSON객체 출력 반복문 사용법 each

제이쿼리 반복문 사용법 each

---

jQuery 사용시에 JSON 객체를 편리하게 출력하는 방법을 알아보겠습니다.

 

JSON 객체는 KEY, VALUE로 이루어져 있어 출력하기 어려워 하시는분들을 위해서 작성하는 글 입니다.

 

추가로 JSON 객체 배열 출력 방법도 알아보겠습니다.

---

 

1.  JSON 객체 $.each() 함수로 간단하게 출력하기

// JSON 객체 선언
let jsonObj = {'name': 'jin-su', 'age': 20, 'address': 'seoul'};


// JSON 객체 each 함수로 출력하기
$.each(jsonObj, function(index, item){
    console.log('KEY 값: ', index, 'VALUE 값: ' , item);
});

JSON 객체인 jsonObj 변수를 each함수안에 넣어줍니다.

function()안에 존재하는 인자는 왼쪽은 index(KEY) 값

오른쪽은 item(VALUE) 값 으로 이루어져 있습니다.

 

console.log() 함수를 통해서 출력 해보겠습니다.

KEY값: VALUE값: 이런식으로 출력이 됩니다.

 

출력 결과

KEY 값: name VALUE 값: jin-su
KEY 값: age VALUE 값: 20
KEY 값: address VALUE 값: seoul

---

 

2.  JSON 객체 배열 $.each() 함수로 간단하게 출력하기

// JSON 객체 선언
let jsonObj = [
                {'name': 'jin-su', 'age': 20, 'address': 'seoul'},
                {'name': 'ja-sung', 'age': 22, 'address': 'daegu'}
              ];


// JSON 객체 배열 each 함수로 출력하기
$.each(jsonObj, function(index, item){
    console.log(index, item);
});


// JSON 객체 배열 특정 부분만 each 함수로 출력하기
$.each(jsonObj, function(index, item){
    console.log(index, item['name']);
    console.log(index, item['age']);
    console.log(index, item['address']);
});

JSON 객체 배열을 each()함수로 출력할 경우에는 idnex의 값이 0, 1, 2, 3... 처럼

JSON 객체의 개수를 표현합니다.

 

또한 JSON 객체에서 특정 부분만 출력하고 싶으면 코드의 맨 아래 부분을 참고 하시길 바랍니다.

 

 

출력 결과

첫번째 $.each() 함수

0 {name: 'jin-su', age: 20, address: 'seoul'}
1 {name: 'ja-sung', age: 22, address: 'daegu'}

 

두번째 $.each() 함수

0 'jin-su'
0 20
0 'seoul'
1 'ja-sung'
1 22
1 'daegu'

---

감사합니다.