[Java][JSON][파싱] JSON 배열 파싱하기

목표

♠ JSON 형식을 이해할 수 있다.

♠ JSON.parse()을 사용할 수 있다.

 

 

JSON

정의

JavaScript Object Notation

JSON은 key와 value가 쌍으로 이루어진 데이터 객체를 전달할 때 쓰는 개방형 표준 데이터 형식이다.

JSON은 Map 구조이다. 따라서 key값이 중복되면 안 된다.

 

JSON 자료형

객체

• 객체는 중괄호{ }로 나타낸다.
• 쉼표를 사용해 여러 프로퍼티를 포함할 수 있다.

{"r_text":"리뷰 1", "r_star":3, "r_m_id":"y1234"}

배열

• 배열은 대괄호[ ]로 나타낸다.
• 배열의 각 요소는 문자열, 숫자, 객체, 배열, boolean 또는 null이 될 수 있다.
• 각 요소는 쉼표로 구분한다.
• JSON 배열은 중첩된 객체와 배열을 값으로 가질 수 있다.

[
	{"r_text":"리뷰 1", "r_star":3, "r_m_id":"y1234"},
	{"r_text":"리뷰 2", "r_star":3, "r_m_id":"yejii"}
]

 

 

JSON Array 파싱 하기

위에서 말했듯이 JSON은 일종의 Map구조이기 때문에 key값이 중복되면 안 된다. 만약 중복되면 마지막 값만 저장된다.

때문에 동일한 키를 가진 여러 개의 데이터를 저장하려고 할 때 문제가 생기는데, 이때 필요한 것이 바로 JSON Array이다.

JSON Array는 JSON을 배열 형태로 나타내어 인덱스별로 저장하므로 중복 문제를 피한다.

 

예시

java로 JSON Array를 만들어 보자.

1. JSONObject 객체를 생성해 프로퍼티를 추가한다.
2. JSONArray 객체를 생성해 JSONObject 객체들을 추가한다.
3. 새로운 JSONObject 객체를 생성해 "univ"라는 프로퍼티의 value값으로 JSONArray를 넣어준다.
4. 이 JSONObject 객체를 String형으로 바꾸어 웹 브라우저에 보낸다.

package action;

import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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

import svc.AjaxAction;
import svc.BookReviewListService;
import vo.Review;

public class BookReviewListAction implements AjaxAction {

	@SuppressWarnings("unchecked")
	@Override
	public void execute(HttpServletRequest req, HttpServletResponse resp) throws Exception {

        // 파싱할 최종 데이터 담아주기 위한 문자열
        String json = "";	
        JSONArray jsArr = new JSONArray();
		
        JSONObject jObject1 = new JSONObject();
        jObject1.put("r_text", "리뷰 1");
        jObject1.put("r_star", 1);
        jObject1.put("r_m_id", "yejii");

        JSONObject jObject2 = new JSONObject();
        jObject2.put("r_text", "리뷰 2");
        jObject2.put("r_star", 2);
        jObject2.put("r_m_id", "y1234");

        // JSONObject를 JSONArray에 순서대로 저장
        jsArr.add(jObject1);	// 0번 인덱스
        jsArr.add(jObject2);	// 1번 인덱스

        // 최종적으로 univ Object에 JSONArray를 저장
        JSONObject univ = new JSONObject();
        univ.put("univ", jsArr);

        // 파싱할 데이터를 저장
        json = univ.toJSONString();

        /* 파싱할 최종 데이터 보내기 */
        resp.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        out.print(json);
        out.close();

        return;
    }

}

 

위 예시에서 만든 univ(최종 JSONObject)를 살펴보면 아래의 형태일 것이다.

{
	"univ":
    		[
       	 		{"r_text":"리뷰 1", "r_star":1, "r_m_id":"yejii"},
          		{"r_text":"리뷰 2", "r_star":2, "r_m_id":"y1234"}
       		]
}

 

 

이제 웹 브라우저로 넘어와 화면에 출력해 보자.

1. 서버에서 toJSONString으로 바꾸어 전달했으니 success의 함수에서 인자 jsArr은 String형이다. 
2. JSON.parse를 사용해 JSON으로 인코딩 된 String 객체(jsArr)를 자바스크립트 객체로 디코딩해 toJsObj에 저장한다.
3. toJsObj의 키 "univ"가 null이 아닐 때 인덱스로 접근해 루프를 돌면서 값을 가져온다.

<script>
    $.ajax({
        url: "/bookReviewList.re",
        type: "POST",
        data: data,
        dataType: "TEXT",
        success: function(jsArr) {
        
            var html = "";

            // String타입의 jsArr(JSON으로 인코딩된 객체)를 자바스크립트 객체로 변환
            var toJsObj = JSON.parse(jsArr);

            if(toJsObj.univ != null) {
                $.each(toJsObj["univ"], function(index, value) {

                    html += "<div class='review_item'>";
                        html += "<div class='media'>";
                            html += "<div class='d-flex'>";
                                html += "<img src='img/product/review-2.png' alt=''>";
                            html += "</div>";
                            html += "<div class='media-body row'>";
                                html += "<div class='col-lg-12'>";
                                    html += "<h4>" + value.r_m_id + "</h4>";
                                html += "</div>";
                                html += "<div class='col-lg-12 star'>";
                                    for(let i = 1; i <= value.r_star; i++) {
                                          html += "<i class='fa fa-star'></i>";
                                        }
                                html += "</div>";
                            html += "</div>";
                        html += "</div> ";
                        html += "<p>" + value.r_text + "</p>";
                    html += "</div>";

                    $(".review_list").html(html);
                });	
            }
            else { 
                html += "<div class='review_item'>" + "등록된 리뷰가 없습니다. " + "</div>";
            }
        },
        error: function(request, status, error) {
            console.log("code: "+request.status+"\n"+"message : "+request.responseText+"\n"+"error: "+error);
        }
    }); 
</script>

 

루프문에서 index와 value를 콘솔창에 출력하면 다음과 같이 나온다.

JSON 배열

 

리뷰가 출력된 화면은 아래와 같다.

JSON 배열 출력 결과

 

끝.