Java scriptとQueryで表作成

Question

深夜遅く失礼します」。
今現在EclipseでWEBアプリを作成しているのですが、テーブル作成に迷っています。

HTMLでテーブル作成したことあるのですが条件がありまして、JSファイルで指定したリンク先を表にして表示することは可能でしょうか？

もっと具体的に話すと検索した検索結果が表で統一されたように表示させたいのです。（"たぬき"と調べたらたぬきのプロフィールが表で表示されるような。）

経験が浅いので正直なんて調べればいいのかもわかりません。。。

宜しく御願いします。

Answer 1

何となく分かったような・・・
私の理解で正しいか分かりませんが、URL先のファイルがJson形式なんですかね？

例：http://www.aaa.co.jp/test.json ← これがjson形式

上記の理解で良ければ
http://symfoware.blog68.fc2.com/blog-entry-294.html
このサイトの「$.getJSON("data/sample.json", function(json){」
を「$.getJSON("http://www.aaa.co.jp/test.json", function(json){」
に変更すれば良いかと思います。

Comments

[takato]

trick様

正しくはURLにJSONとは一切記載されていないです。
このページにつなぐとjson形式の
例だと：http://www.aaa.co.jpとなり、
ページを開くと
[ {
"id" : "000",
"syurui_name" : "たぬき",
"doubutu_name" : "ポンタ",
"keywords" : [ "たぬき", "ポンタ" ]
} ]
と表示されます。
この表示を表にし見やすくしようとしてます。
今現在「$.getJSON("http://www.aaa.co.jp", function(json){」
ト編集してもデータが返ってこないんです・・・

[trick]

クロスドメイン問題がありまして、json 形式では
他のドメインのデータを取得する事ができません。
参考サイト：http://iwb.jp/jquery-ajax-jsonp/

jsonp 形式であればよさそうです。
参考サイトのサンプルであれば、当方でも動作確認できました。

[takato]

データを引っ張ることが出来ました！ありがとうございます。

Answer 2

拝見させていただきましたが、http://symfoware.blog68.fc2.com/blog-entry-294.htmlに近いです。

「指定したURL」は JSON のようですので、下記いずれかの方法で実装可能です。

(1) JSONをGETする

• XMLHttpRequest で「指定したURL」を GET し、JSON.parse でパース
• JSONPを使う(サーバが対応していれば)

(2) table要素ノードを生成

1. createElement で table 要素ノードを生成
2. Document Object Model HTML の HTMLTable**** 系APIでtable関連要素を操作して <table> を作る

「(2) -> 2.」は createElement で要素ノードを生成して appendChild で挿入する方法も有です。

Comments

[takato]

think49様

ありがとうございます。
いきなり難しい単語が…

このリンク先はJSONファイルを読み込んでいます。
しかし私の場合のリンク先はURLで表示されているJSON書式で返ってきている表示データを指定、対象にしたいのです。

今現在検索して飛んだページに行くとJSON書式でかなり見づらいんです…
なので検索して表示したページを表として表示させたいのです。

経験が浅いせいで申しわけないですが、わかりづらい言い方になっているかと思います。

Answer 3

そのJSファイルのリンク先とは何なのでしょうか？
APIを呼んで答えが返ってくるような物なのでしょうか？
JSで取得してくるようなデータですとJSON形式が多かもしれません。
その場合であれば要するに配列なので表にするのは比較的簡単かなぁと思います。

もしも全然関係ない他のサイトのHTMLであれば質問者さんが必要なデータを取捨選択して整形する必要があるので手間は一気に増えるような気がします。

結局は取得してくるデータがなんなのかが分からないと、表に出来るのかどうかもわからないっていう答えになってしまうかもしれませんね。

Comments

[takato]

ご返答ありがとうございます。
まさにそれです！
APIを使用するのが初めてでして。。。
やり方かもしくは調べるキーワードを教えていただけませんか？

[trick]

呼び出し先はPHPとかですかね？
上位が何か分かりませんが、
ajax から上位を呼び出して
json 形式を取得
表形式に表示であれば
php（上位が何かによります。) ajax json
で調べればいろいろ出てきますよ

[takato]

trick様
ありがとうございます。
PHPではなくローカルで普通のネットのように開いています。形式なんだろう。。。

[trick]

google の Google Custom Search API
（http://qiita.com/megu_ma/items/8cad39f61e35588e5476）
みたいなのを呼び出して表形式にしたいのですかね？
上記であればJSON形式で取得できそうなので
ajaxにてgoogle API 呼び出し → JSON 取得 → 表形式に表示
みたいな感じですかね

[takato]

ご親切にありがとうございます。
拝見させていただきましたが、http://symfoware.blog68.fc2.com/blog-entry-294.htmlに近いです。
JSONファイルから読み取りでなくURL先を指定してJSON形式で表示されているのを表にしたいのです。