Loading Data with CollectionView

The object model used in the CollectionView class is similar to the one defined by .NET's ICollectionView and IPagedCollectionView interfaces.

Loading data into a CollectionView is straightforward.

From Client

If you already have the data in an array, you can use that array as a constructor parameter, or set the sourceCollection property to that array. Below is an example of both approaches using an array of JSON objects.

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 }
]

// create CollectionView object with data
let cv = new wijmo.CollectionView(data);
//or
let cv = new wijmo.CollectionView();
cv.sourceCollection = data;

From Server

If the data is on a server, you can retrieve it using the httpRequest method. When you get the response from the server, set the sourceCollection array to the response value or append the new data to the sourceCollection array.

Example

let view = new wijmo.CollectionView();
...
wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Categories', {
    data: {
        $format: 'json',
        $select: 'CategoryID,CategoryName,Description'
    },
    success: (xhr) => {
        // got the data, assign it to the CollectionView
        let response = JSON.parse(xhr.response);
        let data = response.d ? response.d.results : response.value;

        // use the result as the sourceCollection
        view.sourceCollection = data;
    }
});

If your data service API supports commands such as filtering, sorting, and paging, you can add parameters to your httpRequest calls to support those. You can even encapsulate the server API into a custom class that extends CollectionView.

For a simple example of a custom server-based CollectionView class, see our ServerCollectionView sample.

For more complete examples, with full support for CRUD operations, see the Breeze and FireBase samples or check out the source code for the ODataCollectionView class.

JSON Dates

JSON is a great format for serializing data, but unfortunately it does not support dates.

The Problem

If you serialize an object that contains date fields using JSON.stringify, the dates will be converted to strings. If you then parse the same object using JSON.parse, the date fields will remain strings.

The Solution

The solution for this problem is to use a 'reviver' function in the call to JSON.parse that will inspect the strings and convert those that look like dates into date objects.

Check out the Loading JSON Dates sample for an example of how to format JSON dates.