[자바스크립트]JSON 합치기 (Merge)

다음과 같은 JSON이 있을때 같이 key값 끼리 array로 합치는 방법

[{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}]

javascript의 concat과 reduce 함수를 사용하면 된다.

array.reduce(callback, [,initialvalue])

array.concat([item1,[item2...[itemN]]])

var data = [{
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "array_key": ["array1", "array2", "array3"]
}, {
    "key1": "value1_1",
    "key2": "value2_1",
    "key3": "value3_1",
    "array_key": ["array1_1", "array2_1", "array3_1", "array4"]

}, {
    "key1": "value1_last",
    "key2": "value2_last",
    "key3": "value3_last",
    "array_key": ["array1_last"]

}];

var result = data.reduce(function(r, e) {
  return Object.keys(e).forEach(function(k) {
    if(!r[k]) r[k] = [].concat(e[k])
    else r[k] = r[k].concat(e[k])
  }), r
}, {});

console.log(result);

그럼 다음과 같은 결과를 얻을 수 있다.

[{
	"key1" : ["value1", "value1_1", "value1_last"],
	"key2" : ["value2", "value2_1", "value2_last"],
	"key3" : ["value3", "value3_1", "value3_last"],
	"array_key" : ["array1", "array2", "array3", "array1_1", "array2_1", "array3_1", "array4", "array1_last"]
}]

예제를 직접 실행하면 다음과 같이 볼 수 있다.

VO객체에서 JSON으로 변환하기

google-gson

GSON을 이용하면 다음과 같다.

Map<String, Object> data = new HashMap<String, Object>();
data.put( "result", "success" );
data.put( "message", "ok" );
data.put( "statusCode", 200 );
JSONObject json = new JSONObject();
json.putAll( data );
System.out.printf( "JSON: %s", json.toString(2) );

Jackson Project

Jackson 라이브러리 역시 JSON 변환이 가능하다.

Jackson을 이용하면 다음과 같다.

Map<String, Object> data = new HashMap<String, Object>();
data.put( "result", "success" );
data.put( "message", "ok" );
data.put( "statusCode", 200 );
String json = new ObjectMapper().writeValueAsString(data);
System.out.println(json);

두 라이브러리 모두 Map 대신에 VO객체도 가능하다.

취향에 맞게 골라 쓰면 된다.

스프링 프레임워크를 사용하다가 가끔은 AJAX 없이 첫페이지에서 데이터를 JSON으로 JSP에 넘겨주고 싶을때

서버에서 넘겨주는 ModelMap을 JSP페이지에서 어떻게 받을지에 대한 글 입니다.

ModelMap.addAttribute("result", result);

보통 이렇게 JAVA파일에 작성하여 JSP의 JSTL을 사용합니다.

그런데 가끔 자바스크립트의 데이터로 사용할 일이 생깁니다. 그럴땐 다음과 같은 방법으로 JSON을 생성합니다.

자바파일에서 

JACKSON을 이용하는 방법

String json = new ObjectMapper().writeValueAsString(JsonVO);
ModelMap.addAttribute("result", json );

또는

Gson을 사용하는 방법

Map<String, String> jsonMap = new HashMap<String, String>();
jsonMap.put("one", "hello");
jsonMap.put("two", "world");

Gson gson = new GsonBuilder().create();
String json = gson.toJson(jsonMap);
ModelMap.addAttribute("result", json );

이런 방식으로 JSP단으로 JSON을 넘겨주고 JSON을 스크립트에서 받을때는 

<script>
var jsonData = ${result};
</script>

이렇게 저장 합니다.

여기서 중요한건 데이터에 따움표가 없다는 것입니다.

그래야 javascript의 eval메소드 없이 값을 할당 할 수 있습니다.

{
    "one" : "hello",
    "two" : "world"
}

jsonData 변수에 위의 JSON이 할당 됩니다.

가끔 쓰는 방법이니 기억해 두고 있으면 편리 합니다.