JSON 이란? 배열을 stringify 해서 ajax로 보내고 java에서 parser로 파싱하기

- JSON이란? -

JSON이란 무엇일까?
JSON은 아래의 줄임말이다.
> JavaScript Object Notation 

번역하자면 자바스크립트에서 객체를 표현하는 문법정도 된다.
내부 형태는 아래처럼 속성 이름과 속성 값이 쌍을 이루는 구조다.

const obj = { key1:val1, key2:val2, key3:val3 };

이렇게 간단한 구조에다가
여러 환경에서 통용되는 형태이기 때문에
많이 사용한다.

- Java에서 JSON 단일 객체 다루기 -

먼저 전체적인 흐름은 다음과 같다.
어떤 데이터를 입력 받는다.
그 데이터의 자료형은 문자열이다.
데이터 내용은 JSON 형태로 이루어져 있다.
이러한 경우 그 데이터를 JSON 객체로 변환할 수 있다.
이처럼 변환하는 작업을 parsing 이라고 한다.
한마디로, 문자열을 객체로 변환하는 작업이다.

- Java에서 Json 단일 객체 다루기 예제-

String data = "{ \"name\":\"John\", \"age\":\"31\", \"city\":\"New York\" }";   
JSONParser parser = new JSONParser();
JSONObject json = (JSONObject) parser.parse(data);
System.out.println(json);

 

 

위와 아래는 똑같은 코드이고, 아래에는 주석을 달았다.

//아래처럼 JSON 데이터가 string 형태로 있다. 이 string을 JSON 객체로 변환할 것이다. 이 과정을 parsing이라고 한다.
String data = "{ \"name\":\"John\", \"age\":\"31\", \"city\":\"New York\" }";   
//JSON 데이터를 parsing 해주는 parser 객체를 먼저 만든다.
JSONParser parser = new JSONParser();
//parser가 parsing해준 결과를 JSON 객체로 받는다.
JSONObject json = (JSONObject) parser.parse(data);
//출력해 보면 string이었던 data가 객체로 변환돼 있는 것을 확인할 수 있다.
System.out.println(json);

참고로 import는 아래 경로로 했다.
import org.json.simple.~~~~

- Java에서 JSON 배열 객체 다루기 -

JSON 단일 객체 다루기에 성공했다면
배열을 다루는 것도 어렵지 않을 것이다.
중간에 한 단계만 추가되는 정도이기 때문이다.

먼저, 아까와 마찬가지로, 어떤 문자열이 존재한다.
그 문자열 내부 내용은 JSON 형태로 이루어져 있다.
다만 조금 다른 점은, JSON 객체가 여러 개 담겨 있는 배열이라는 점이다.

이 문자열을 JSON 배열 객체로 변환할 것이다.
변환하기 위해서는 먼저 변환기를 만들어야 한다.
문자열을 JSON 객체로 변환해주는 parser를 생성한다.

parser 객체를 만들었다면, 그 안에 아까 문자열을 넣는다.
그러면 그 결과를 받아서 자료형이 JSONArray 인 변수에 넣어준다.
이렇게 완성한 JSONArray 를 가지고 forEach 반복문을 돌릴 수 있다.

forEach 반복문을 돌 때는 
JSONArray 객체 안에 있는 요소들을 하나하나 꺼내서
JSONObject 자료형을 갖는 변수에 넣어준 뒤에 사용해야 한다.

/*JSON 객체 배열*/
String data = "[{ \"name\":\"John\", \"age\":\"31\", \"city\":\"New York\" }, { \"name\":\"Mike\", \"age\":\"27\", \"city\":\"chicago\" }, { \"name\":\"Elly\", \"age\":\"26\", \"city\":\"Boston\" }]";
System.out.print(data);
JSONParser parser = new JSONParser();
JSONArray arr = (JSONArray) parser.parse(data);
arr.forEach((item)->{
    JSONObject json = (JSONObject) item;
    System.out.println("\n"+json.get("name"));
});

정리하자면, 문자열 데이터에 들어 있는 내용이
JSON 단일 객체인지 아니면 JSON 배열 객체인지에 따라서
parsing 결과도 달라진다.
parser.parse() 안에 단일 객체를 넣었다면,
parsing 결과를 (JSONObject)로 형 변환해서 받아야 하고,
parser.parse() 안에 배열 객체를 넣었다면,
parsing 결과를 먼저 (JSONArray)로 받은 뒤에,
반복문을 돌면서 (JSONObject)를 하나하나 꺼내와야 한다.

- JavaScript 에서 JSON 데이터 보내기 -

JSON은 JavaScript 객체라고 했다.
프론트 쪽에서는 서버 쪽으로 데이터를 보낼 때,
문자열 형태로 보내줄 수 있다.

서버 쪽에서 일단 문자열로 받고 나면 그 뒤로는,
우리가 이미 JSON을 다루는 법을 위에서 배웠으므로,
객체로 다루면 된다.

JavaScript에서는 어떻게 문자열로 보낼 수 있을까?
JSON이라는 객체를 이용한다.
JSON 객체는 stringify() 와 parse() 함수를 들고 있다.
stringify()는 객체를 문자열로 바꿔주는 함수이고,
parse()는 반대로 문자열을 객체로 바꿔주는 함수다.

- JavaScript 에서 JSON 데이터 보내기 예제-

let dataList = [];
const tbChild = document.querySelector('tbody#personList').childNodes;
tbChild.forEach(function(item) { 
    //HTML 요소들로부터 필요한 값들을 불러온다.
    const name = item.querySelector('input.name').value;
    const age = item.querySelector('input.age').value;
    const city = item.querySelector('input.city').value;

    //불러온 값들을 JSON 객체 형태로 만든다.
    const item = {
        name: name,
        age: age,
        city: city
    };

    //JSON 객체를 배열 안에 넣어둔다.
    dataList.push(item);
});

//완성된 dataList를 확인한다.
console.log(dataList);
//dataList를 문자열로 바꾼 결과를 확인한다.
console.log(JSON.stringify(dataList));

if (dataList.length > 0) {
    $.ajax({
        url: 'personInfo',
        data: {
            //JSON 객체를 불러와서 stringify() 함수 안에 배열을 넣어준다.
            param: JSON.stringify(dataList)
        },
        method: 'POST',
        success: function(result) {
            console.log(result);
        }
    });
}

- 220405