データ：データの読み込み

CollectionViewクラスで使用されるオブジェクトモデルは、.NETのICollectionViewおよびIPagedCollectionViewインタフェースによって定義されるオブジェクトモデルに類似しています。

CollectionViewへのデータの読み込みは単純です。

クライアントからの読み込み

既にデータが配列としてある場合は、その配列をコンストラクタのパラメータとして使用するか、sourceCollectionプロパティにその配列を設定できます。次の例は、この両方の方法を示しています。ここでは、JSONオブジェクトの配列が使用されています。

import * as wijmo from '@mescius/wijmo';

let data = [
    { id: 1, country: 'Luxembourg', gdpm: 57825, popk: 563, gdpcap: 102708 },
    { id: 2, country: 'Switzerland', gdpm: 664005, popk: 8238, gdpcap: 80602 },
    { id: 3, country: 'Norway', gdpm: 388315, popk: 5205, gdpcap: 74604 },
    { id: 4, country: 'Macao', gdpm: 46178, popk: 647, gdpcap: 71372 },
    { id: 5, country: 'Qatar', gdpm: 166908, popk: 2421, gdpcap: 68941 },
    { id: 6, country: 'Ireland', gdpm: 283716, popk: 4635, gdpcap: 61211 },
    { id: 7, country: 'United States', gdpm: 18036650, popk: 321601, gdpcap: 56083 },
    { id: 8, country: 'Singapore', gdpm: 292734, popk: 5535, gdpcap: 52887 },
    { id: 9, country: 'Denmark', gdpm: 295091, popk: 5660, gdpcap: 52136 },
    { id: 10, country: 'Australia', gdpm: 1225286, popk: 23940, gdpcap: 51181 }
]

// データを指定してCollectionViewオブジェクトを作成します
let cv = new wijmo.CollectionView(data);
// または
let cv = new wijmo.CollectionView();
cv.sourceCollection = data;

サーバーからの読み込み

データがサーバー上にある場合は、httpRequestメソッドを使用してデータを取得できます。サーバーから応答を取得したら、sourceCollection配列に応答値を設定するか、sourceCollection配列に新しいデータを付加します。

例

let view = new wijmo.CollectionView();
...
wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Categories', {
    data: {
        $format: 'json',
        $select: 'CategoryID,CategoryName,Description'
    },
    success: (xhr) => {
        // データを取得し、CollectionViewに割り当てます
        let response = JSON.parse(xhr.response);
        let data = response.d ? response.d.results : response.value;

        // 結果をsourceCollectionとして使用します
        view.sourceCollection = data;
    }
});

使用しているデータサービスのAPIがフィルタ処理、ソート、ページングなどのコマンドをサポートする場合は、httpRequest呼び出しにパラメータを追加して、これらの機能を使用できます。CollectionViewを拡張するカスタムクラスにサーバーAPIをカプセル化することもできます。

サーバーベースのカスタムCollectionViewクラスの簡単な例については、ServerCollectionViewのサンプルを参照してください。

CRUD操作をすべてサポートする完全な例については、BreezeとFireBaseのサンプルを参照するか、[ODataCollectionView]()クラスのソースコードを確認してください。

JSONの日付

JSONは、データをシリアライズするための優れた形式ですが、残念ながら日付をサポートしていません。

問題

日付フィールドを含むオブジェクトをJSON.stringifyを使用してシリアライズすると、日付は文字列に変換されます。次に、JSON.parseを使用して同じオブジェクトを解析すると、日付フィールドは文字列のままになります。

解決策

この問題の解決策としては、文字列を調べて、日付と考えられる文字列を日付オブジェクトに変換するための「復活」関数をJSON.parse呼び出し内で使用します。

JSONの日付の書式設定方法については、JSONの日付の読み込みのサンプルを参照してください。