忍者ブログ

2018
07
23

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/07/23 (Mon.)

2010
12
17

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


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;
}



PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

06 2018/07 08
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア