WEB API をhtmlにテーブル形式で展開する方法

Question

node.js mongodb html5 angularjs などを使ってAPIを上手く活用するような一連の仕組みを作っているのですが、ネットを探してもわからないところがあり、お力を拝借したく存じます。

個人情報が載ってる関係でその該当リンクをのせることはできないのですが、クラウドサービス上（Paas)に作成したWEB APIのリンクを叩きに行くと、[｛name:青木,age:34｝,{name:イチロー,age:41}]といったいわゆるjson形式でかえってくるのですが、このAPIをtable上に展開しみやすくできるhtmlを作成したいと考えています。

このAPIのデータをとってきてhtml上のtableに展開するというところにかなり苦戦していて、どうして良いかわかりません。

ソースコードなどが載せられず、適切な質問形式ではないかもしれませんが、何かしらのヒントとなるご助言をいただけませんでしょうか？

Heroku Bluemix Salesforceなどで同様の経験のある方とくにお力をおかしいただければと存じます。
イメージはこのサイトでしていることをhtml上で自動的に変換できればという感じです。
http://json2table.com/

WEB APIからのデータ取得にこだわっている背景としては、API Managementのようなサービスを使いユーザーのアクセス制御をかけたいと思っているからです。

直でアプリからmongodbの中の該当データを引っこ抜いてくるというのはできているのですが、制御APIを通過させるというところに苦戦しております。

Comments

[kei344]

JavaScriptでWEB APIからデータを取る、データからテーブルを作る、のどちらもできないのであれば、質問内容はそもそも解決できません。どこがどうわからないのかが全く分からないので、個人情報を書き換えて具体的に記述されてはいかがでしょうか。

[zyunnsalome]

ありがとうございます。

WEB　APIからMongo DBのデータ一覧を取得するという作業までは完成しています。そのURLを開いた時に出てくるJSONのベタ書きされたテーブルを別のhtml上でtableに展開するというようなことができればいいなというのが今したいことです。

Answer 1

AngularJsの名前をあげられていますが、普通にangularで
バインディングするのではダメですか。

//コントローラ

//apiからjsonを取得してきたとして

$scope.players = json;

<tr ng-repeat="player in players">
  <td>{{player.name}}</td>
  <td>{{player.age}}</td>
</tr>

Comments

[zyunnsalome]

ありがとうございます。

ただ、現在作成したほうがそちらのパターンでして、それでもいいのですが、このやり方だとすべてのデータを出してきたあとにフィルターをかけるイメージになり、負荷が大きくなるということで、サーバー側である程度制御したいと考えております。

もし勘違いしておりましたら、もう少し詳しく教えていただきたいです。

[nnssn]

apiは常にデータを全件返す作りになっているということですか？もしそうなら、まず先にapi側に取得件数や取得開始位置を指定できる仕組みを作った方が良いと思います。今のままではクライアントでどう工夫しても結局データを全件引き出すことに変わりはないので。検索語句として関係がありそうな物はページネーション limit offsetなどです。

[zyunnsalome]

ありがとうございます。それもしないといけないこととして認識しております。早速調べてみます。ただ、まずは、APIからデータをtableに取得というのが一番のお題目となっていて質問させていただきました。

Answer 2

どこまで理解していてどの辺りで詰まっているのが不明ですが、XMLHttpRequest で JSON を取得してください。

'use strict';
(function () {
  function handleReadystatechange (event) { // XMLHttpRequest Level 1
    var xhr = event.target, object;

    if (xhr.readyState === 4 && xhr.status === 200) {
      object = JSON.parse(xhr.responseText);
      console.dir(object);
    }
  }

  function createHandler (_handle, xhr) {
    return handle (event) {
      if (event) {
        event.target = xhr;
      } else {
        event = {target: xhr};
      }

      _handle.call(xhr, event);
    };
  }

  function handleLoad (event) { // XMLHttpRequest Level 2
    var xhr = event.target, object;

    if (xhr.status === 200) {
      object = JSON.parse(xhr.responseText);
      console.dir(object);
    }
  }

  function main () {
    var xhr = new XMLHttpRequest(); //  for IE7+

    xhr.open('GET', 'data.json', true);

    if (typeof xhr.addEventListener === 'function') {
      if ('onload' in xhr) {
        xhr.addEventListener('load', handleLoad, false);
      } else if ('onreadystatechange' in xhr) {
        xhr.addEventListener('readystatechange', handleReadystatechange, false);
      }
    } else if (typeof xhr.attachEvent === 'function' || typeof xhr.attachEvent === 'object') {  // for IE8-
      if ('onload' in xhr) {
        xhr.attachEvent('onload', createHandler(handleLoad, xhr));
      } else if ('onreadystatechange' in xhr) {
        xhr.attachEvent('onreadystatechange', createHandler(handleReadystatechange, xhr));
      }

    }

    xhr.send(null);
  }

  main();
}());

JSON は JSON.parse で展開可能です。

'use strict';
var json = '[{"name":"青木","age":34},{"name":"イチロー","age":41}]',
    array = JSON.parse(json);

for (var i = 0, l = array.length, object; i < l; ++i) {
  object = array[i];
  console.log(object.name, object.age);
}

table要素の生成は次の手順で可能です。

1. document.createElement('table') でtable要素ノードを生成
2. thead, tbody, tr, td, th 要素ノードを生成して appendChild (HTMLTable**** の DOM API を利用してもOK)
3. createTextNode でテキストノードを生成して appendChild もしくは、textContent

• Document Object Model HTML

Comments

[zyunnsalome]

ご回答有り難うございます。
1つの大きな課題として、データが増えたり減ったりしても対応できるようにしたいのですが、var JSON でデータをベタ書きする以外に方法はないのでしょうか？
ネット上のものを調べると、データ量の増減に対応できそうなものがない状況です。

これをするとなるとかなり難易度が高いのでしょうか？

[think49]

親記事にも書きましたが、XMLHttpRequest を利用してください。
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0012
もしくは JSONP でも構いません。
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011

[zyunnsalome]

ありがとうございます。よく見させていただきます。もし不明点がございましたら質問させていただくかもしれませんが、よろしくお願いいたします。

[zyunnsalome]

すいません。記載いただいた流れで大体イメージは掴めました。ありがとうございます。

かなり基本的な質問になるのですが、配列arrayに入れることになる、JSON.parse（）⇐になにを引数として入れたら良いのかよくわかっていないようです。（恐れながら、ちなみにXML HttpRequestははじめてで、見よう見まねでやっている状況です。。）

少し例をあげて教えていただけませんでしょうか？

var xhr= new XMLHttpRequest();

//request getting data
xhr.open("GET","https://api.・・・・・・");
xhr.send();

array = JSON.parse();

[zyunnsalome]

１から勉強したいところなのですが、時間的に迫られていることもあり、お助けいただけますと非常にありがたいです。

[think49]

親記事にコードを追記しました。
(さすがに3分で読んで作れそうなコードの断片を載せられると「勉強する時間が少なすぎるのではないか」と感じてしまいます)

Answer 3

サーバ上のデータ（の件数を減らす）については置いておいて、HTMLにJSON読込⇒tableで表示ならjQueryを使ったサンプルが多数出てくると思います。
検索：jQuery JSON table

jQuery は内部でXMLHttpRequestを使って通信を実現しています。「なんでもjQueryで！」という事は好きではありませんが、ユーザーが多いため実装例が多数出てくるはずです。
また、表示方法は Angular でバインディングするのとあまり変わりませんので、負荷については良くなることはありません。件数を減らす処理はnnssnさんの言われるように API からの取得時に行うべきでしょう。

Comments

[zyunnsalome]

ありがとうございます。
自分の課題解決には、まず、APIの方の仕様を変更するのが賢明だとわかりました。

いろいろとありがとうございます。