JSON リーダーの rootProperty を動的に設定する

JSON リーダーの rootProperty を動的に設定する方法をメモっとく。

ストアにモデルを指定するとストアの操作時にモデルのプロキシが使用される。REST プロキシの場合、モデルからプロキシを利用するときと、ストアからモデルのプロキシを利用するときでは、リクエスト URL が異なる。そのためレスポンス JSON も異なってくることがあり、JSON リーダーの rootProperty を動的に設定すると便利なことがある。

ストアからのリクエストとモデルからのリクエストでレスポンス JSON が異なる例

ストアからのリクエストとモデルからのリクエストでレスポンス JSON が異なる例として、ユーザーを取得する REST API を考えてみる。

GET /users

ユーザーの一覧を取得する API。ストアからのリクエストで使用される。

グリッドでユーザーの一覧を表示する場合、50件ずつページングして表示するということがある。総ページ数を計算するためにはユーザーの総数が必要になるので、その情報をメタ情報として JSON レスポンスに含めたい。そういうときには users プロパティにユーザーの一覧が、total プロパティにユーザーの総数が入っているようなエンベロープのある JSON レスポンスにすることがある。

{
    "users": [{
        "id": 1,
        "name": "Alice"
    }, {
        "id": 2,
        "name": "Bob"
    }, {
        "id": 3,
        "name": "Charlie"
    }, {
        "id": 4,
        "name": "Dave"
    }],
    "total": 4
}

GET /users/:id

指定 ID のユーザーを取得する API。モデルからのリクエストで使用される。

フォームでユーザー情報の詳細を表示する場合、ID 指定で1件だけ取得して表示する。とくにメタ情報は不要なのでエンベロープのない JSON レスポンスにすることがある。

{
    "id": 1,
    "name": "Alice"
}

JSON リーダーの rootProperty を動的に設定する

モデルのプロキシにリーダーを定義するときに、rootProperty を設定する。モデルかストアかということで判別せずに、users プロパティが JSON レスポンスに存在すればその内容を取得するという実装にしている。

User.js

Ext.define('Fiddle.model.User', {
    extend: 'Ext.data.Model',

    fields: ['id', 'name'],

    proxy: {
        type: 'rest',
        url: '/users',
        reader: {
            rootProperty: function (data) {
                return data.users || data;
            }
        }
    }
});

このモデルを使用することでストアはシンプルな定義を実現できる。

Users.js

Ext.define('Fiddle.store.Users', {
    extend: 'Ext.data.Store',

    model: 'Fiddle.model.User',
    autoLoad: true
});

サンプルコードはこちら。JavaScript コンソールに出力しているのでデベロッパーツールを開いて確認してほしい。

---

今回は JSON リーダーの rootProperty を動的に設定してみた。スキーマを活用してより汎用的にプロキシを実装する方法も近々記事にする予定なので期待してほしい。

参考文献