JavaScript Obejct 형식의 데이터를 덤프하여 내용 보기

invalid-file

JavaScript Object 의 내용을 덤프(Dump)해 볼 수 있는 스크립트 예제(Example)

JavaScript의 Object 형식의 데이터는 내용을 보기 쉽지 않아 별도의 디버깅 툴을 이용하여 내용을 확인하게 됩니다.

급할때 다음과 같이 Objec 데이터를 덤프해주는 함수를 추가하여 내용이 무엇이 들었는지 확인하는 방법도 괜찮을 것 같네요. ^ ^


아래는 자바스크립트(JavaScript) 소스입니다.

   99 <script language="javascript">

  100 

  101     var MAX_DUMP_DEPTH = 10;

  102 

  103     function dumpObj(obj, name, indent, depth) {

  104         if (depth > MAX_DUMP_DEPTH) {

  105             return indent + name + ": <Maximum Depth Reached>\n";

  106         }

  107 

  108         if (typeof obj == "object") {

  109             var child = null;

  110             var output = indent + name + "\n";

  111             indent += "\t";

  112 

  113             for (var item in obj)

  114             {

  115                 try {

  116                     child = obj[item];

  117                 } catch (e) {

  118                     child = "<Unable to Evaluate>";

  119                 }

  120 

  121                 if (typeof child == "object") {

  122                     output += dumpObj(child, item, indent, depth + 1);

  123                 } else {

  124                     output += indent + item + ": " + child + "\n";

  125                 }

  126             }

  127 

  128             return output;

  129 

  130         } else {

  131             return obj;

  132         }

  133     }

  134 

  135     var object1 = new Array();

  136     object1[0] = 1;

  137     object1[1] = 2;

  138     object1[2] = 3;

  139     object1[3] = 4;

  140 

  141     var returnVal = dumpObj(object1, "object", "  ", 1);

  142 

  143     document.write("<pre>" + returnVal + "</pre>");

  144 

  145 </script>

소스에서 보시다시피 위에는 dumpObj()에 대한 선언이 있고

아래 간단히 테스트로 var object1 을 배열로 선언해 1~4까지 각각 값을 할당하고, 배열 안의 값을 출력하는 내용입니다.

출력 할 때에는 출력내용이 줄단위로 표현되는 것을 제대로 보여주기 위헤 'pre' 테그로 감쌌습니다.

예상대로 결과는 다음과 같이 나옵니다.

  object
  	0: 1
  	1: 2
  	2: 3
  	3: 4

참고 :
http://www.google.co.kr/search?source=ig&hl=ko&rlz=&q=javascript+object+dump
http://weblogs.asp.net/skillet/archive/2006/03/23/440940.aspx



2008/01/08 - [Sites] - HTML, CSS, JS 등 Markup과 DHTML의 기초를 위한 추천사이트
2007/08/30 - [Sites] - JS, CSS, AJAX, 등등 웹 개발에 필요한 링크들 모음
2007/06/16 - [JavaScript] - 자바스크립트
2007/04/29 - [AJAX] - Javascript Library in Ajax