寝太郎の江戸風呂。ね！

[PR]

2024/04/27 (Sat.)

オブジェクトのプロパティを表示する関数

JSONPを利用する時、どのようなオブジェクトが返ってくるのか知りたい時があります。APIの仕様書を見れば、オブジェクトの構造はだいたい分かるのですが、たまに XML の仕様書だけ掲げられていて、実際には、JSONP の内容がそれとは違うことがあります。特に、 XML で繰り返し出現する要素が、JSON で配列で表現されていることが多いようです。

オブジェクトの構造が分からなければ、コールバック関数で処理の記述ができません。そこで、オブジェクトの構造を DL 要素内に表示する関数を考えてみました。

オブジェクトから順次プロパティを取り出し、プロパティのキーを DT 要素に、プロパティの値を DD 要素に割り当てます。

プロパティの値が オブジェクトの場合には、再帰処理を行います。こうすることにより、オブジェクトの内容がツリー状に表現されます。

生成した DL 要素が返ります。これをページ内の要素に、appendChild　メソッド等で追加して下さい。

JSONPで返るオブジェクトの内容を表示することを目的としていますが、一般的なオブジェクトを対象とすることも可能です。ただし、一般的なオブジェクトに利用する時は、無限ループにならないよう注意が必要です。プロパティが参照するオブジェクト
が、自分自身だったりすると無限ループとなります。これに対する対策は施していません。そのような可能性のあるオブジェクトには、利用しないで下さい。

ソースコード

function propaties(obj){
 var dl=document.createElement('dl');
 if(obj==window||obj==document||obj==history){
   var dt=document.createElement('dt');
   var dd=document.createElement('dd');
   dt.innerHTML=obj.toString();
   dd.innerHTML=obj.valueOf();
   dl.appendChild(dt);
   dl.appendChild(dd);
 }else{
  for(k in obj){
   var dt=document.createElement('dt');
   var dd=document.createElement('dd');
   dl.appendChild(dt);
   dl.appendChild(dd);
   dt.innerHTML=k;
   var flg=false;
   if(obj[k]&&typeof obj[k]=='object'
      &&!obj[k].nodeType&&k!='mimeTypes'
      &&k!='plugins'){
     dd.appendChild(propaties(obj[k]));
   }else if(obj[k]){
     dd.innerHTML=obj[k].toString();
   }else{
     dd.innerHTML='[null]';
   }
　}
 }
 return dl;
}

2010/12/17 (Fri.) Trackback() Comment(0) JavaScript