JSON 바인딩하여 HTML 만들기

ajax 로 호출하여 리턴된 데이터를 처리할 때 화면 도시를 위해서 html 에 바인딩 하는 경우가 많다.

 

아래의 예시와 같은 경우

 

var callBackAjax = function(data){

var html = "<div>" + data.tVal +"</div>"

/// .... 중략

}

 

이는 js 소스에 대한 복잡도 증가 및 가독성을 떨어트리게 된다.

이를 극복하기 위해 jquery 의 tmpl 을 사용하는 경우도 있다.

 

필자가 제작한것은 tmpl 과 유사한 간단한 jquery 플러그인이다.

(function( $ ) {

    $.fn.generateHtml = function(data) {

    var html = $(this).html();

var array = html.match(/@{(\w+[.]?)+}/g);

if(array == null){

return html;

}

for(var i = 0 , len = array.length ; i < len ; i++){

html = html.replace(array[i], findValue(array[i], data));

}

return html;

    },

    findValue = function(key, data){

key = key.replace(/(@{|})/g, '');

return reclusive(key.split(".") , data);

},

reclusive  = function(keys, data){

var result = data[keys[0]];

if(result === undefined || result === null){

return '';

}

if(keys.length > 1){

return reclusive( keys.slice(1), result);

}

return result;

};

}(jQuery));

 

 

 

사용법 예시

 

 // 사용할 HTML 의 구조를 만들고 ID 를 부여한다.

 // @{데이터의 key} 로 사용할 데이터를 명시한다.

<script id="templateTag" type="text">
    <div>
         <div> @{tVal} <div>
         <div> @{pVal} <div>
         <div> @{oee.tVal} <div>
         <div> @{oee.pVal} <div>
    </div>
</script>

 

<script>

$(function(){
 var testData = {tVal : 100, oee : {tVal:"233", pVal : "555"}} // 예시 데이터
 // pVal 값이 없는 경우는 공백입력됨
console.log($("#templateTag").generateHtml(testData)); 

})
</script>

 

실행 결과

    <div>
         <div> 100 <div>
         <div>  <div>
         <div> 233 <div>
         <div> 555 <div>
    </div>