18416


使用している環境は以下です。

  * Eclipse、API
  * JavaScript
  * jQuery

現在WEBアプリケーションを作成しています。  
Eclipseでアプリを起動して、指定してあるURLを開くとJSON形式でデータが表示されます。  
例えば、以下の様に表示されます。

[code]

      "id" : "51018221",
      "cat_id" : "10061845",
      "first_reg_daytime" : "2015-07-28T00:00:00.000+0000",
      "maker_cd" : "009",
      "maker_name" : "seven",
      "ca_cd" : "10102047",
      "ca_name" : "タロウ",
               …
    
[/code]

このようなデータが返ってきます。デモとしてお客さんに見せたいのですが、このままだと見にくいということで、JavaScriptやjQuery(ajaxでも構いません)を使用してJSON形式のデータをHTMLのテーブルに変換して見やすくしたいのです。

とても難易度が高く、わかる方は少ないと言われています。どなたかご存知の方いらっしゃいませんか？  
ちなみに今の自分が作成しているコードです。これだとただJSONを呼んでいるだけですが・・・

[code]

    $.ajax({
      type: 'GET',
      url: 'http://localhost:8180/api/stockcars/search?q=',
      datatype: 'json',
      success: function(json){
        $.each(json, function(i, item){
          $('body').prepend(item[0] );
        });
      },
      error: function(){
        alert('error');
      }
    });
    
[/code]

宜しく御願いします。


CC BY-SA 3.0
2015-11-04T02:18:37.830
18389
2015-11-05T03:18:51.520
2015-11-04T06:05:29.043
13072
question
javascript jquery eclipse
JSファイルを使用してJSON形式をテーブルに表示に変換する


そのデータは配列でくるのでしょうか。  
もし配列で処理したいのであればcolumnsというjQueryプラグインを利用してはどうでしょうか。  
<https://github.com/eisenbraun/columns>

※
このプラグインを利用する場合、[データの無い行も含めて、常に５０件表示したい](https://ja.stackoverflow.com/questions/7701)
という質問と回答が以前ありましたので必要ならば確認してください。

あとは、DynaTableというのもありますので。こちらも検討してみてください。  
<http://www.dynatable.com/>


CC BY-SA 3.0
2015-11-04T08:30:45.927
18401
2015-11-04T08:30:45.927
2017-04-13T12:52:39.113
-1
8335
18389
answer


"html
json"でグーグル検索してヒットした[超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編](http://www.ezgate-
mt.sakura.ne.jp/jquery/161.html) を参考に、jQueryでテーブルを表示するサンプルを作ってみました。  
以下のコードをUTF-8で保存後、todo部分を書き換えてブラウザで開くとテーブルが表示されると見込んでいます。

※動かすと分かる通りデザイン性は一切考慮せず、jsonのテーブル変換に必要な処理のみ行っています。  
デモに使うならばCSSで装飾するか Norikaz Ishii さんの提示されたように、既存のソリューションを検討される方が望ましいと思われます。  
あしからずご留意願います。

[code]

    <html>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $("table.tbl tbody").html("");
            //todo 配列の親要素を書き換える
            for(var index in xml.data.line){
                $('<tr>'+
                  //todo 表示項目を書き換える
                  '<th>'+xml.data.line[index].line_cd+'</th>'+
                  '<td>'+xml.data.line[index].line_name+'</td>'+
                  '</tr>').appendTo('table.tbl tbody');
            }
        });
        </script>
        <!-- todo jsonファイルのURLを書き換える -->
        <script src="http://www.ekidata.jp/api/p/13.json"></script>
    <body>
        <table cellpadding="0" cellspacing="0" border="0" class="tbl">
        <tbody>
        </tbody>
        </table>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-11-05T03:18:51.520
18416
2015-11-05T03:18:51.520
9820
18389
answer