JSON - JSON API 사용하여 JSON표기 쉽게 처리 하기

앞에서 살펴본 JSON표기법을 기본으로 하여 사용자가 직접 JSON의 표기법을 선언해 사용할 수 있다. 하지만 전달될 데이터가 복잡해 지고 다양해 지면서 개발자가 직접 JSON 표기법에 맞추어 제작하기는 매우 힘들다. 그렇기 때문에 www.json.org 에서 제공하는 API를 통해 개발자 들은 직접 JSON표기법으로 JSON데이터를 구성하지 않고 만들수 있다.

1. JSON API 다운로드 받기

http://www.json.org 페이지의 하단 부분의 json-simple 이란 부분을 클릭한다.

상단의 download를 클릭하면 json Library를 다운 받을 수 있다.
JSON의 document를 보려면 org.json 을 클릭하면 문서를 확인 할 수 있다.

2. JSON의 구조

Ajax방식으로 스크립트에서 JSON ENGINE을 호출하면 JSON ENGINE은 DB에 접근 하는 java class를 호출 하여 DB에서 데이터를 가져오게 된다.
이때 가져온 데이터를 JSON API를 통해 JSON방식으로 데이터를 생성하고 view페이지로 텍스트 방식으로 넘긴다. 그리고 그 데이터를 다시 자바스크립트로 보내게 되는 루트를 가진다.
여기서 가장 중요한 것은 view 페이지의 json데이터는 반드시 text 형식으로 설정되어야 한다는 것이다.

<%@ page  contentType="text/plain; charset=EUC-KR"%>

3. 작성방법
1) object 형식으로 데이터를 받아 사용하는 방식

① 블로그에 올린 HttpRequest.js 파일의 sendRequest function을 통해 Ajax방식으로 JavaClass로 접근한다.
sendRequest("cartjson.action", param, jsonCartObject, "POST");
cartjson.cation : javaclass파일 호출
jsonCartObject : callback 함수 호출

② javaClass에서 JSON API를 통해 JSON객체 생성
public String createJSONObject(){
   SalesCartBean bean = getCartBean();
   
   JSONObject obj = new JSONObject();  //json을 사용하기 위한 객체 생성
   obj.put("goods", bean.getGoods());   //앞은 key 뒤는 value
   obj.put("qty", bean.getQty());
   obj.put("cost", bean.getCoststr());
   obj.put("amount", bean.getAmountstr());
  
   JSONObject outer = new JSONObject(); //
   outer.put("cartlist", obj);      //session의 cartlist를 obj에 넣는다.
   System.out.println(outer);
   return outer.toString();
 }

다음과 같이 JSONObject 인스턴스를 생성하여 put() method로 key와 value를 넣어주고 있다.
그리고 하단에서 outer라는 이름의 JSONObject 인스턴스를 생성해 위에서 생성한 obj를 넣어주고 있다. 즉 다음과 같이 하면 JSON의 표기법은
cartlist : {

"obj" : {
          "goods" : "bean.getGoods()데이터",
          "qty" : "bean.getQty() 데이터",
          "cost" : "bean.getCoststr()의 데이터",
          "amount" : "bean.getAmountstr()의 데이터"
          }
}

다음과 같은 형태가 된다.

③ 데이터를 전달 받은 view page는

<%@ page  contentType="text/plain; charset=EUC-KR"%>

${jsoncart}

이런식으로 설정해 주고 다시 callback method를 실행 시켜 JSON데이터를 끄집어 낸다.

function jsonCartObject(){
   if(httpRequest.readyState == 4) {
      if (httpRequest.status == 200) {
        var json = eval('(' + httpRequest.responseText + ')');  //json정보는 text로 가져온다. eval의 ()안의 것은 method가 된다.
        var tableID = document.all.salesbody;
        var row=tableID.insertRow(1);
        row.bgColor="ffffff";
        row.height="24";
        row.align="center";
        row.insertCell().innerText=json.cartlist.goods;  //insertCell() : 행을 나눈다(javascript function).전달받은 json데이터의 데이터를 가져온다.
        row.insertCell().innerText=json.cartlist.qty;
        row.insertCell().innerText=json.cartlist.cost;
        row.insertCell().innerText=json.cartlist.amount;
       }
     }
  } 

다음과 같은 방식으로 json데이터를 가져온다.

2) Array를 사용하여 JSON데이터 생성
① 블로그에 올린 HttpRequest.js 파일의 sendRequest function을 통해 Ajax방식으로 JavaClass로 접근한다.
sendRequest("cartjson.action", param, jsonCartArray, "POST");

② JAVA Class에서 데이터를 전송받아 JSON객체 생성

public String createJSONArray(){
  JSONArray inner = new JSONArray();
   for(int i = 0; i < cartlist.size(); i++){
     SalesCartBean bean = cartlist.get(i);
     JSONObject obj = new JSONObject();
     obj.put("goods", bean.getGoods());
     obj.put("qty", bean.getQty());
     obj.put("cost", bean.getCoststr());
     obj.put("amount", bean.getAmountstr());
     inner.add(obj);
  }
  JSONObject outer = new JSONObject();
  outer.put("cartlist", inner);
  System.out.println(outer);
  return outer.toString();
 }

JSONArray 객체를 생성한다. 그리고 list형인 cartlist라는 collection을 가져와서 JSONObject 형에 넣어주고 inner라는 Array형에다가 넣어준다.
또 마지막으로 Object형으로 선언한 outer에다가 inner를 넣어주면서 배열형식으로 변환한다.

즉 다음과 같은 형태는 JSON표기법으로 다음과 같이 표현된다.
 {cartlist : 
       [ 
         {
          "goods" : "노트북",
          "gty" : 2,
          ...
         },
         {
           "goods" : "노트북",
            "gty" : 2,
            ...
          },
        ]
   }

③ callback function에서 전송된 json객체를 처리한다.

function jsonCartArray(){
     if(httpRequest.readyState == 4) {
      if (httpRequest.status == 200) {
     var json = eval('(' + httpRequest.responseText + ')');
        var sid  = document.getElementById("salesbody");
        if(sid.rows.length>1){
      for (k=sid.rows.length-1; k >= 1 ; k--){
       sid.deleteRow(k);  //노드를 삭제 한다.
      }
     }
     for(i=0; i< json.cartlist.length; i++){
      oRow = document.createElement('tr');        
      oCel0 = document.createElement('td');
      oCel1 = document.createElement('td');
      oCel2 = document.createElement('td');
      oCel3 = document.createElement('td');
       
      //oRow.style.textAlign='center';
      oRow.height='24';
      oRow.bgColor="ffffff";
            
      oCel0.className='cel0';
      oCel1.className='cel1';
      oCel2.className='cel2';
      oCel3.className='cel3';
      
      oRow.appendChild(oCel0);
      oRow.appendChild(oCel1);
      oRow.appendChild(oCel2);
      oRow.appendChild(oCel3);
      
      oCel0.style.textAlign='center';
      oCel1.style.textAlign='center';
      oCel2.style.textAlign='right';
      oCel3.style.textAlign='right';
      
      oCel0.innerHTML=json.cartlist[i].goods;
      oCel1.innerHTML=json.cartlist[i].qty;
      oCel2.innerHTML=json.cartlist[i].cost+'&nbsp;&nbsp;';
      oCel3.innerHTML=json.cartlist[i].amount+'&nbsp;&nbsp;';
      
      document.getElementById('salesbody').children(0).appendChild(oRow);
     }
       }
     }
    }
  
다른부분은 로직부분이기때문에 볼 필요 없고 색 있는 곳을 보면 cartlist를 배열형식으로 접근하고 있다.