エンジニア日記

日々の開発あれこれ

Angular JS で、APIを非同期でGET呼び出しし、返却されたデータを表示する

  • APIはJSONデータを返却する
  • JSONデータにはあるグループのグループ名、コメント、登録日が格納されている
  • 返却されたJSONデータを ng-repeat(ループ) で表示する
<!doctype html>
  <html lang="ja">
    <body ng-app="group" ng-cloak>
      <div ng-controller="GroupController">
        <table>
          <thead>
            <tr>
              <th>グループ名</th>
              <th>コメント</th>
              <th>登録日</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="group in data.group_list">
              <td>{group.group_name}</td>
              <td>{group.comment}</td>
              <td>{group.regist_date}</td>
            </tr>
          </tbody>
        </table>
      </div>
   <!-- Anguler JS 読み込み ここから -->
      <script src="angular.js"></script>
      <script src="angular-resource.js"></script>
   <!-- Anguler JS 読み込み ここまで -->
      <script>
        var GroupController = function($scope, $resource){

        // GETパラーメータ
        var parameter = {hoge: 'fuga'};

        var group_api = $resource(" APIパス ");

        // 非同期でGET通信
        group_api.get(parameter, function(data){
            $scope.data = data;
        });

        var appModule = angular.module('group', ['ngResource']);
        appModule.controller('GroupController', GroupController);
      </script>
  </body>
</html>