ID非公開

2011/8/24 0:46

22回答

jQueryの$.getJSONで情報を取り出すことについての質問です。 ソースの参考 ※xml→jsonの変換、IDによる取得についての質問です。(解決済み) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1269446917

jQueryの$.getJSONで情報を取り出すことについての質問です。 ソースの参考 ※xml→jsonの変換、IDによる取得についての質問です。(解決済み) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1269446917 前回は質問に答えていただきありがとうございます。 前の質問で回答でいただいたjsonを改変してjQueryの$.getJSONでclassmate.jsonの情報をHTMLに吐き出すテストをしています。 今以下のような形で一応ちゃんと(?)HTMLに吐き出せるようになりました。 ここで質問なのですが、 1,jsonに@(アットマーク、多分属性のことですよね?)がついていますが、どうやって@属性をjQueryで取得すればいいのか。 data[i]@classでもdata[i].classでも取得できませんでした。 2,取得できているどうの以前の問題にこの書き方はいいのか、処理は遅いけど問題はない、問題がありすぎる、のか。(json,jquery両方) 3,forが入れ子になっているのは問題ないか。(もしもう1つ深い階層?があったらさらにforの入れ子をしてもいいのか) 本来は3つとも分けて質問した方がいいかもしれませんが、ソースが同じなのでまとめました。 よろしくおねがいします。 以下ソース ※ classmate.json ※ [ { "type" : "person", "id" : "aaaa", "name" : "hogehoge", "@class" : 3, "family": [ { "type" : "family-member", "name": "Moge", "type": "Mother" }, { "type" : "family-member", "name": "Poge", "type": "Father" } ] },{ /* 上のようなものが続く*/ } ] ※ jQuery ※ $(function(){ $.getJSON("classmate.json", function(data){ var member; $("input[name=classmate]").change(function(){ /* メンバーの名前を取得 */ member= $(this).val(); /* 取得したメンバーの情報を表示する */ setMember(member); }) /* 情報を表示する関数 */ function setMember(member){ /* 暫定的にaaaa*/ if(member == null){member = "aaaa"} /* liがどんどん増えるので消す*/ $("#family li").remove(); for(var i in data){ /* dataのidがmemberだったら */ if(data[i].id == member){ /* 各HTMLにjsonのデータを出力する */ $("#name").text(data[i].name); $("#class").text(data[i].class); $("#about-family").text(data[i].name+"には"+data[i].family.length+"人の家族がいます。"); /* familyの人数分 */ for(var j in data[i].family){ $("#family").append("<li>"+data[i].family[j].type+"の名前は"+data[i].family[j].name+"</li>"); } break; } } } // ロード時に実行 setMember(member); }); }); ※ HTMLに関してはradioをclassmateの数分作った+jQueryにあるidを持つHTMLを全部書いてあります ※

JavaScript1,503閲覧xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

0

(1). JavaScript では obj.prop と obj['prop'] が同じです。なので data[i]["@class"]。この "@" に特殊な意味はなく、ただの目印です。 余談ながら、class は JavaScript の予約語なので obj.class とは書けません。しかし、obj['class'] と文字列にすれば何の問題もない。極端な話 obj["This is a peeeen!!"] も可です。ならば、内部パラメータであることを示す記号でも入れておけば見やすいと思い、"@" を入れたにすぎません。 obj.$class のように "$" を使う手もあります。これなら文字列にしなくても大丈夫。しかしながら、もともと "$" は機械生成される識別子の目印です(典型的には廃止された RegExp.$1)。まあ、Prototype 以降、"$" がひどく濫用され、現在ではこの制約も取り払われました。JSON Schema では $ref、$schema のようなヘッダキーに使われます。 --- (2). 外部データを出力するときは、XSS に気をつけて下さい。 > .append("<li>"+data[i].family[j].type+"の名前は"+data[i].family[j].name+"</li>"); ここで type や name に、"<" や "&" などの文字が含まれていると HTML を壊します。悪意ある HTML に改竄される恐れもあります。一方で、 > jQuery.text(data[i].name) こちらは内部的に DOM Core の createTextNode() を呼び出すので、文字エスケープは不要です。 外部データを利用するときは、自分で HTML 文字列を組み立てるのを極力避け、面倒でも createElement() などの DOM API を通して下さい。これは innerHTML の場合も同じです。 --- (3). for のネストは構いませんが、for の使い方が違います。 > for(var i in data){ この data は配列ですが、そもそも JavaScript の配列を for...in で回してはいけません。数値以外のプロパティが列挙される可能性がありますし、何より、列挙順は順不同です。できる限り Array#forEach を使うか、面倒でも for (var i = 0, L = data.length; i < L; i++) ... で回して下さい。 > for(var j in data[i].family){ こちらの family は Object なので for...in で回さねばなりませんが、このままだと Object.prototype を拡張するような行儀の悪いスクリプトを併用したときに、拡張プロパティも全て列挙されてしまいます。だから、前回の私のサンプルコードでは、いちいち hasOwnProperty() でチェックしていたわけです(ECMAScript 5 では拡張プロパティを列挙させないようにできますが、まだ広まっていませんので)。 jQuery を使っているなら jQuery(data).each(function(i, data) { /* this === data */ })... のように JSON もぶん回せます。まあ、いわゆるクロージャのネストが深くなり、かえって大変なのでおススメはしません。 --- JSON Query 言語を標準化する試みはまだありませんが、SQL や LINQ、XPath/CSSS を使って JSON を照会するライブラリは、そこそこ発表されていたと思います。jQuery にこだわりがなければ、そちらを探してみるのも手でしょう(プラグインになるものもあった気がします)。

ThanksImg質問者からのお礼コメント

@についても、データを出力するときの注意点についても、forとfor inについても大変よくわかりました。毎回ご丁寧にありがとうございます。

お礼日時:2011/8/28 10:26

その他の回答(1件)

0

別IDです。 HTMLは <body> <form action="" method="get"> <label><input type="radio" checked name="classmate" value="aaaa" />aaaa</label><br /> <label><input type="radio" name="classmate" value="bbbb" />bbbb</label> </form> <dl> <dt>名前:</dt> <dd id="name"></dd> <dt>クラス:</dt> <dd id="class"></dd> </dl> <p id="about-family"></p> <ul id="family"> </ul> </body> です。 jsonもfamilyの数が固定では無く、1〜6の幅があります。 [{ "type" : "person", "id" : "aaaa", "name" : "hogehoge", "@class" : 3, "family": [ { "type" : "family-member", "name": "Moge", "type": "Mother" }, { "type" : "family-member", "name": "Poge", "type": "Father" } ] }, { "type" : "person", "id" : "bbbb", "name" : "foo", "@class" : 2, "family": [ { "type" : "family-member", "name": "Foge", "type": "Mother" }, { "type" : "family-member", "name": "Poge", "type": "Father" }, { "type" : "family-member", "name": "Boge", "type": "brother" } ] }] よろしくお願いします。