外部からJSONでリストを取得して画面に表示する

タイトル通りだけど、外部のJSONファイルにアクセスして取得したオブジェクトを画面表示してみる。
出来上がりはこんな感じ

f:id:ats337:20140223214225p:plain

まずは、以下のようなJSONファイルを用意する。

userlist.json

{"userList" : [
        {"user" : {
                "id": "U0001",
                "name":"湯沢太一",
                "mailAddress":"yuzawa@sample.com"
        }},
        {"user": {
                "id":"U0002",
                "name":"小山雄一郎",
                "mailAddress":"koyama@sample.com"
        }}
]}

続いて実装。
外部JSONファイルを読み込むためにngResourceを使用するので、
angular-resource.min.jsを読み込むようにしておく。
更に、

angular.module('myApp', ['ngResource'])

でngResourceを取り込んでおく。

次にJavaScript実装
UserControllerというコントローラクラスを作成し、
$resourceを用いてuserlist.jsonファイルを読み込む。
読み込み後は、コールバック関数function(data)の中で、取得したJSONオブジェクトからuserListを取得している。

myApp.controller('UserController',
        function UserController($scope, $resource) {
            $scope.userList = null;

            $scope.getUserList = function() {
                $resource("userlist.json").get(
                        function(data) {
                            $scope.userList = data.userList;
                        });
            };
        }
);

最後のHTML

<div ng-controller="UserController">
    <table class="table table-striped" ng-init="getUserList()">
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メールアドレス</th>
            <th>&nbsp;</th>
        </tr>
        <tr ng-repeat="user in userList">
            <td>{{user.user.id}}</td>
            <td>{{user.user.name}}</td>
            <td>{{user.user.mailAddress}}</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</div>

ng-initで、初期表示時にUserControllerクラスのgetUserList関数を呼び出すように設定する。
更に、ng-repeatを用いて、userListをループして行を構成している。