0

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

  • Eclipse、API
  • JavaScript
  • jQuery

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

  "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" : "タロウ",
           …

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

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

$.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');
  }
});

宜しく御願いします。

3
  • 質問する手間を惜しんでいては良い解答は得られないと思います。 入力、出力、環境などをはっきりさせることが、良い解答を得るための第一歩です。
    – 豚吐露
    Commented 2015年11月4日 4:21
  • 豚吐露様 アドバイスありがとうございます。 編集しました。 これでいかがでしょうか? Commented 2015年11月4日 5:54
  • 2
    まず、提示されている入力は、入力となるjsonの一部分ですよね?それだと、解答できないと思います。そのデータは、1つだけですか?複数ですか?複数返ってくるなら、その複数データの書かれ方は?という部分が問題になります。それが分からないと解答は得られないと思います。参考までに、難易度的には低い部類に入ると思います。
    – 豚吐露
    Commented 2015年11月4日 10:12

2 件の回答 2

1

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

※ このプラグインを利用する場合、データの無い行も含めて、常に50件表示したい という質問と回答が以前ありましたので必要ならば確認してください。

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

0

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

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

<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>
2
  • payaneco様 わざわざありがとうございます。 試させていただいたところ for(var index in xml.data.line){に xml is not definedというエラーがでました・・・ Commented 2015年11月6日 10:04
  • jsonの構造にあわせてxml.data.lineを書き換える必要があります。質問にあるjsonのサンプルからは構造が読み取れなかったので、読み替えていただくしかないのですが…。
    – payaneco
    Commented 2015年11月6日 11:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。