# Loading Data with CollectionView

Learn how to load data into Wijmo applications in this documentation topic

## Content

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.

```javascript
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
```javascript
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__](https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/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__](/wijmo/docs/Topics/Wijmo/Collections/Loading-Data) 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](/wijmo/demos/Core/CollectionView/LoadingDAta/LoadingJSONDates) sample for an example of how to format JSON dates.