検索先のJSON形式をテーブルにする方法

今現在上記タグを使用してWEBアプリを作成しています。
JSON形式のデータからサジェスト候補を出力して検索をかけることができます。
検索でとんだページはJSON形式で表示されてしまうため大変見にくいです。ですのでこれをテーブル上で表示できないかと考えいます。
検索をかけてとんだページを変換させて表示するやり方ご存知の方力添え下さい。

html
1<!DOCTYPE HTML>
2<HTML>
3<head>
4<link rel="stylesheet" href="./css/jquery-ui.min.css">
5<script src="./js/jquery.js" charset="UTF-8"></script>
6<script src="./js/jquery-ui.js" charset="UTF-8"></script>
7//サジェストの役割をするjsファイル
8<script src="js/Suggest.js"></script>
9</head>
10<body>
11//サジェスト候補でもってきたデータを下記のURL + 「サジェスト候補の単語」で検索サーチをかける
12<form method="get"action="http://localhost:8180/api/stockcars/abc=" Accept-charset="UTF-8">
13//サジェスト候補をidに入れる。結果的に送信先はhttp://localhost:8180/api/stockcars/abc=検索ワードになる
14<input type="text"  id="ac2"  name="xxx_name" >
15<input type="submit" value="検索"></form>
16</body>
17</HTML>

javascript
1$(document).ready( function() {
2//サジェスト機能
3$("#ac2").autocomplete({
4	source: function(req, resp){
5		$.ajax({
6		//サジェスト候補先
7		    url: "http://127.0.0.1:8180/api/xxxx/keyword",
8		    type: "GET",
9		    cache: false,
10		    dataType: "json",
11		    data: {
12		    car_name : req.term
13		    },
14		    success: function(o){
15		    	resp(o);
16		    },
17		    error: function(xhr, ts, err){
18		    	resp(['']);
19		    }
20		  });
21
22	}
23});
24});

行動規範の内容に同意します

回答2件

ベストアンサー

検索結果をJSON形式→テーブル変換するのであれば
検索結果のURLを渡してやれば良いと思いますが

html
1<html>
2<head>
3    <title>js sample</title>
4    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
5    <script type="text/javascript">
6    
7    //画面構築完了後
8    $(function() {
9        $("#btn_1").click(function(){
10	      $.ajax({
11			  type: 'GET',
12			  url: '検索結果のURL',
13			  dataType: 'jsonp',
14			  jsonpCallback: 'data',
15			  success: function(json){
16			    var rows = "";
17	                
18	                //テーブルとして表示するため、htmlを構築
19	                for (i = 0; i < json.length; i++) {
20	                    rows += "<tr>";
21	                    for (j = 0; j < json[i].length; j++) {
22	                        rows += "<td>";
23	                        rows += json[i][j];
24	                        rows += "</td>";
25	                    }
26	                    rows += "</tr>";
27	                }
28	                
29	                //テーブルに作成したhtmlを追加する
30	                $("#tbl").append(rows);
31			  }
32			});
33		});
34		
35		
36    });
37
38    </script>
39</head>
40<body>
41	<table id="tbl" border="1">
42        <tbody>
43            <tr>
44                <th>英語</th><th>日本語</th>
45            </tr>
46        </tbody>
47    </table>
48    <input id="btn_1" type="button" value="検索" />
49</body>
50</html>

投稿2015/10/29 04:04

trick

総合スコア366

takato

2015/10/29 06:26

trick様何度も何度もアドバイスいただき感謝しています。 trick様のやり方だとURLの書式を逐一変えるという作業が出てしまいます。。。検索を変えると同時にここのURLが変わればできるんですかね？

trick

2015/10/29 07:49

検索結果のURLは取得出来ますかね？取得出来るのであれば、取得したURLをajaxのURLに設定すれば出来ると思いますが私の認識が違うのかもしれませんが

takato

2015/10/29 08:39

所得の結果のやり方がわからなくて・・・今現在できているソースを質問内容に加えたのでお時間ありましたらご確認くださいませ。やっぱりやろうとしていることは珍しいケースなんですかね・・・

takato

2015/10/29 08:44

もしくはAJAXを組み込み新しいページに飛ばないようにしてその場で検索結果をだし、その表示されたJSONをtrick様が提示してくれたコードで変換すればいいですかね？ 2重作業になってしまいますがそれしかないのならそれで実装します。

trick

2015/10/29 11:38

ソース確認しました。 get で飛ばしてますね飛ばした先がわからないので何とも言えないのですが飛ばした先で検索結果が表示されるのですか？検索結果はどの様な表示ですかね？ URLが表示されているのであれば何とかなりそうですが

takato

2015/10/30 01:27

trick様ありがとうございました。飛ばした先が検索結果になります。それがデフォルトだとおもってました。検索結果は以下のようになります。 [ "id" : "51014236", "xxx_id" : "10089282", "xxx_reg_daytime" : "000000", "xxx_cd" : "7", "xxx_name" : "犬", "xx_cd" : "1111", "x_name" : "猫", "xxxx_name" : "Ｘ", …etc です。「json.human.js」でテーブル変換するといい感じになりました。

行動規範の内容に同意します

何となくやりたい事が分かったと思います。
検索結果先のURLを引数にしたリンクで別ページ（JSONをテーブルに変換するページ）に
飛ばしてはどうでしょうか？

html
1<a href="test2.html?url=http://www.aaa.co.jp/sample.json">検索結果先</a>

上記の様なリンクタグを検索結果として表示し
「検索結果先」がクリックされた場合は、test2.htmlにurlを引数で渡して
test2.html 側で受け取ったURLからデータ（json形式）を取得しテーブルに表示する。

html
1<html>
2<head>
3    <title>js sample</title>
4    <script type="text/javascript" src="jquery-1.9.0.min.js"></script>
5    <script type="text/javascript">
6    
7    //画面構築完了後
8    $(function() {
9   //引数を分解
10        var data = location.href.split("?")[1];
11
12		var data2 = data.split("=");
13
14	      $.ajax({
15			  type: 'GET',
16			  url: data2[1],
17			  dataType: 'jsonp',
18			  jsonpCallback: 'data',
19			  success: function(json){
20			    var rows = "";
21	                
22	                //テーブルとして表示するため、htmlを構築
23	                for (i = 0; i < json.length; i++) {
24	                    rows += "<tr>";
25	                    for (j = 0; j < json[i].length; j++) {
26	                        rows += "<td>";
27	                        rows += json[i][j];
28	                        rows += "</td>";
29	                    }
30	                    rows += "</tr>";
31	                }
32	                
33	                //テーブルに作成したhtmlを追加する
34	                $("#tbl").append(rows);
35			  }
36			});
37    });
38
39    </script>
40</head>
41<body>
42	<table id="tbl" border="1">
43        <tbody>
44            <tr>
45                <th>英語</th><th>日本語</th>
46            </tr>
47        </tbody>
48    </table>
49    <input id="btn_1" type="button" value="データ取得" />
50</body>
51</html>