JSON stringify 란?

jQuery Ajax를 사용하면서 json 형식으로 데이터를 주고받는 일이 빈번하게 발생했습니다. 예를 들어 아래와 같은 json 형태를 주고 받는데 있어서는 어려움이 전혀 없었지만, 

{
    id : 'min.c00',
    name : '정민창',
}

 

문제는, 아래의 상황처럼 하나의 key에 array형태로 데이터를 전송해야 하는 부분이었습니다.

{
	list : ['....', '....', ...]
}

 

이 문제를 해결하고자 찾은 방법이 JSON stringity입니다.

---

1. JSON stringify 란?

먼저 JSON은 일반적으로 데이터를 저장하거나 전송할 때 많이 사용되는 데이터 교환 방식인데 Javascript에서 객체를 만들 때 사용하는 표현식을 의미합니다. JSON stringify는 이런 객체를 json 문자열로 변환하는 역할을 합니다. 사용 방법은 다음과 같습니다. 

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

 

JSON.stringify 메서드 안에 넣고 싶은 javascript 값이나 객체를 넣으면 JSON 형태의 문자열 값을 반환해 줍니다. JSON.stringify라는 메서드는 무엇이고 사용방법을 알았다면 위에서 언급했던 하나의 key로 array데이터를 전송하려는 경우 JSON.stringify로 어떻게 해결했는지 궁금하실 것 같습니다.

 

먼저 제가 만났던 문제에 대한 설명을 간략히 하자면 아래의 형식에 맞춰 데이터를 전달해야 하는 상황이 발생했고  article_list라는 json 객체를 value값으로 사용해야 하는 상황이 발생했습니다.

var article_list = {
    title1 : [...], 
    desc1 : [...],
    title2 : [...],
    desc2 : [...]
}

var paramObj = {
	...
    article_list : article_list,
    ...
}

 

JSON.stringify는 이 문제를 한 번에 해결해 주었는데

var paramObj = {
	...
    article_list : JSON.stringify(article_list),
    ...
}

 

이렇게 단순 key/value 형태의 json 객체로 만들 수 있었습니다. 또다른 문제는 JSON.stringify 는 String 타입의 데이터를 반환하기 때문에 다시 JSON으로 변환하는 과정이 필요했습니다. 저는 이 과정을 Java 코드에서 변환해야 했습니다. 이제 Java에서 JSON.stringify로 전달받은 데이터를 어떻게 다시 JSON 데이터로 변환할수 있는지 보겠습니다. 

---

2. JSON parse 란?

JSON.stringify는 객체를 json 형태의 문자열로 변환하는 메서드라고 했습니다. 그럼 이 변환된 문자열을 다시 json 객체로 변환해주는 역할은 JSON.parse 메서드가 담당합니다.  'parse'의 사전적 의미는 '구문을 분석하다'라는 뜻인데 그 뜻 그대로 json 형태의 문자열의 구문을 분석해 Json 객체로 반환해 줍니다. javascript에서의 사용방법은 다음과 같습니다. 

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

 

그럼 자바에서 JSON parse는 어떻게 사용할 수 있을까요? 

import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

 

// 1. JSONParser 객체를 생성한다. 
JSONParser jsonParser = new JSONParser();	

// 2. Object 객체를 생성하고 jsonParser.parse 된 데이터를 저장한다. 
Object obj = jsonParser.parse(// JSON.stringify 로 변환된 String type 데이터 넣는곳);

// 3. JSONObject 객체로 변환한다. 
JSONObject article_list = (JSONObject) obj;

// 4. JSONArray 객체에 article_list의 key, 'title1' 에 해당하는 array value값을 저장한다.
JSONArray user_article_titles = (JSONArray) article_list.get("title1");

먼저 JsonParser 객체를 생성하고 Object 객체에 파서된 데이터를 저장합니다. 이후에 JsonObject 객체로 변환후 JsonArray 타입으로 강제 형변환 후에 필요한 값에 접근해서 핸들링할 수 있었습니다.