2011년 1월 12일 수요일

javascript Map Json

원리대로 JSON을 만드는
{"id":"atspeed","name":"송성일"}
이런식은 교범에나 나오는 방법으로 실무에서는 그닥 사용 빈도가 높지 않다.

보통은 <script type="text/javascript" src="json2.js"></script>을 이용해서

function User(id, name) {
this.id = id;
this.name = name;
}

function userJsonString(){
var user = User("atspeed","송성일");
var jsonString = JSON.stringify(user);
return jsonString;
}

Json String으로 변환을 하기 위해 먼저 만든 Map을 그냥 사용한다면 아래와 같은 문제가 발생한다.
var map = new Map();
  map.put("t1", "test1");
  map.put("t2", "test2");
  map.put("t3", "test3");
  map.put("t4", "test4");
  map.put("t5", "test5");

  var map1 = new Map();
  map1.put("m1", "map1");
  map.put("m1", map1);

  var map2 = new Map();
  map2.put("m2", "map2");
  var map3 = new Map();
  map3.put("m3", "map3");
  var list = new Array();
  list[0] = map2;
  list[1] = map3;

  map.put("list", list);

map.jsonString() : {"t1":"test1","t2":"test2","t3":"test3","t4":"test4","t5":"test5","m1":{"map":{"m1":"map1"}},"list":[{"map":{"m2":"map2"}},{"map":{"m3":"map3"}}]}

즉, Map객체의 this.map이 m1의 아래 나온다.
"m1":{"map":{"m1":"map1"}}
우리가 원하는 결과는"m1":{"m1":"map1"} 이거다.

이 문제를 해결하기 위해 예전에 사용하던 방법은
 typeof this.map[prop] 를 이용해 타입별로 jsonString을 생성하는 거였다.

하지만 좀더 쉬운 방법으로
putMap : function(key, value){
     this.map[key] = value.map;
    },
함수를 추가하는 거다.

위의 예제에서 map.put("m1", map1); 부분을 map.putMap("m1", map1); 으로 바꾸면
map.jsonString() : {"t1":"test1","t2":"test2","t3":"test3","t4":"test4","t5":"test5","m1":{"m1":"map1"},"list":[{"map":{"m2":"map2"}},{"map":{"m3":"map3"}}]}
원하는 결과가 나온다.

list또한 조금 문제가 될수 있지만 스팩만 이해 한다면 사용하는데는 문제가 없다.
그래도 바꾸고자 한다면,
putMapList : function(key, value){
     var list = new Array();
     for(var i=0;i<value.length;i++){
      list.push(value[i].map);
     }
     this.map[key] = list;
    },
를 추가한다.

사용법은 map.putMapList("list", list);
map.jsonString() : {"t1":"test1","t2":"test2","t3":"test3","t4":"test4","t5":"test5","m1":{"m1":"map1"},"list":[{"m2":"map2"},{"m3":"map3"}]}
깔끔한 jsonString을 사용할수 있다.

결과적으로
Map = function(){
 this.map = new Object();
};  
Map.prototype = {  
    put : function(key, value){  
        this.map[key] = value;
    },
    putMap : function(key, value){
     this.map[key] = value.map;
    },
    putMapList : function(key, value){
     var list = new Array();
     for(var i=0;i<value.length;i++){
      list.push(value[i].map);
     }
     this.map[key] = list;
    },
    get : function(key){  
        return this.map[key];
    },
    containsKey : function(key){   
     return key in this.map;
    },
    containsValue : function(value){   
     for(var prop in this.map){
      if(this.map[prop] == value) return true;
     }
     return false;
    },
    isEmpty : function(key){   
     return (this.size() == 0);
    },
    clear : function(){  
     for(var prop in this.map){
      delete this.map[prop];
     }
    },
    remove : function(key){   
     delete this.map[key];
    },
    keys : function(){
        var keys = new Array();
        for(var prop in this.map){
            keys.push(prop);
        }
        return keys;
    },
    values : function(){  
     var values = new Array();  
        for(var prop in this.map){  
         values.push(this.map[prop]);
        }  
        return values;
    },
   size : function() {
    var count = 0;
    for (var prop in this.map) {
      count++;
    }
    return count;
   },
    jsonString: function(){
     return JSON.stringify(this.map);   
    }
};
사용법은
function userJsonString(){
 var map= new Map();
 map.put("id", "atspeed");
 map.put("name", "송성일");
 return map.jsonString();
}

ajax를 태울때는 그냥
function sendUser(){
 var map= new Map();
 map.put("id", "atspeed");
 map.put("name", "송성일");
 sendJsonAjax("user.json", map, "userResult");
}

function userResult(json){
 ...
}

var SEND_JSON_TIMEOUT = 5000;
function sendJsonAjax(sendUrl, map, successFunction, failFunction){
 $.ajax({
  type: "post",
  url: sendUrl,
  data: map.jsonString(),
  dataType: "json",
  timeout: SEND_JSON_TIMEOUT,
  error: function(a, b, c){        
         if(failFunction != null){
          eval(failFunction+"(a,b,c)");
         }else{
          alert('오류가 발생했습니다. 다시 시도해 주십시요.'+ a +' / ' + b +' / ' + c);
         }
     },
     success: function (json) {
      if(successFunction != null){
       eval(successFunction+"(json)");
      }
     }
 });
}

물론 Map에 다른 Map이나 Array를 담아도 문제가 없다.

var map = new Map();
  map.put("t1", "test1");
  map.put("t2", "test2");
  map.put("t3", "test3");
  map.put("t4", "test4");
  map.put("t5", "test5");

  var map1 = new Map();
  map1.put("m1", "map1");
  map.putMap("m1", map1);

  var map2 = new Map();
  map2.put("m2", "map2");
  var map3 = new Map();
  map3.put("m3", "map3");
  var list = new Array();
  list[0] = map2;
  list[1] = map3;

  map.putMapList("list", list);

map.jsonString() : {"t1":"test1","t2":"test2","t3":"test3","t4":"test4","t5":"test5","m1":{"m1":"map1"},"list":[{"m2":"map2"},{"m3":"map3"}]}

그냥 일반적인 jQuery를 이용한 ajax사용법이나, callBack받은 json데이터의 사용법은 생략한다.

일반적인 내용은 나 말고도 더 정리 잘하는 분들이 계시니 그분들의 글을 활용하시면 될듯.
하지만 필자가 구글링을 아무리 해도 정리된 내용의 이해가 어려운 경우는 내가 이해한 방식으로 글을 올리도록 해야겠죠?

#SCMInno #에스씨엠이노 #WEBDeK

댓글 없음: