Loading JSON Dates

Since JSON doesn't support dates very well, you may need to format them when loading in data from a server. This sample demonstrates how dates may appear in the FlexGrid before and after they are 'revived'. It uses the JSON.parse method to turn strings that look like dates into Date objects.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as grid from '@grapecity/wijmo.grid'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // Start with some data encoded as JSON (as it would arrive from a server) let json = getData(); // // Decode the data // No special parsing for dates, the date field will contain strings let dataBad = JSON.parse(json); // // Show the bad data in a grid let theGridBad = new grid.FlexGrid('#theGridBad', { itemsSource: dataBad }); // // Decode the data // Use with a Date reviver to restore date fields let dataGood = JSON.parse(json, (key, value) => { if (typeof value === 'string') { // Parse dates saved as JSON-strings let m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/); if (m) { return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6])); } // // Parse dates saved as OData-style strings m = value.match(/^\/Date\((\d+)\)$/); if (m) { return new Date(parseInt(m[1])); } } return value; }); // // Show the good data in a grid let theGridGood = new grid.FlexGrid('#theGridGood', { itemsSource: dataGood }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Loading JSON Dates</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <p> Here's an example: note how the "Date" column contains strings: </p> <div id="theGridBad"></div> <p> Here is a grid showing the same data, this time parsed with a date reviver function: </p> <div id="theGridGood"></div> </div> </body> </html> export function getData() { let json = '[' + '{"id":0,"country":"US","sales":489.51,"expenses":2358.24,"date":"2017-02-08T12:47:06.405Z"},' + '{"id":1,"country":"Germany","sales":7803.20,"expenses":2513.54,"date":"2017-02-09T12:47:06.405Z"},' + '{"id":2,"country":"UK","sales":9996.58,"expenses":2616.71,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":3,"country":"Japan","sales":9351.68,"expenses":3030.59,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":4,"country":"Spain","sales":349.51,"expenses":7358.24,"date":"/Date(1486561758556)"}' + ']'; // return json; } .wj-flexgrid { max-height: 250px; } body { margin-bottom: 36pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { DataService } from './app.data'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { dataBad: any; dataGood: any; // constructor(@Inject(DataService) private dataService: DataService) { // Start with some data encoded as JSON (as it would arrive from a server) let json = dataService.getData(); // // Decode the data // No special parsing for dates, the date field will contain strings this.dataBad = JSON.parse(json); // // Decode the data // Use with a Date reviver to restore date fields this.dataGood = JSON.parse(json, (key, value) => { if (typeof value === 'string') { // Parse dates saved as JSON-strings let m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/); if (m) { return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6])); } // // Parse dates saved as OData-style strings m = value.match(/^\/Date\((\d+)\)$/); if (m) { return new Date(parseInt(m[1])); } } return value; }); } } // @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Loading JSON Dates</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <p> Here's an example: note how the "Date" column contains strings: </p> <wj-flex-grid [itemsSource]="dataBad"></wj-flex-grid> <p> Here is a grid showing the same data, this time parsed with a date reviver function: </p> <wj-flex-grid [itemsSource]="dataGood"></wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let json = '[' + '{"id":0,"country":"US","sales":489.51,"expenses":2358.24,"date":"2017-02-08T12:47:06.405Z"},' + '{"id":1,"country":"Germany","sales":7803.20,"expenses":2513.54,"date":"2017-02-09T12:47:06.405Z"},' + '{"id":2,"country":"UK","sales":9996.58,"expenses":2616.71,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":3,"country":"Japan","sales":9351.68,"expenses":3030.59,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":4,"country":"Spain","sales":349.51,"expenses":7358.24,"date":"/Date(1486561758556)"}' + ']'; // return json; } } .wj-flexgrid { max-height: 250px; } body { margin-bottom: 36pt; } <template> <div class="container-fluid"> <p> Here's an example: note how the "Date" column contains strings: </p> <wj-flex-grid :items-source="dataBad"></wj-flex-grid> <p> Here is a grid showing the same data, this time parsed with a date reviver function: </p> <wj-flex-grid :items-source="dataGood"></wj-flex-grid> </div> </template> <script> import "bootstrap.css"; import "@grapecity/wijmo.styles/wijmo.css"; import Vue from 'vue'; import * as wijmo from '@grapecity/wijmo.vue2.grid'; import { getData } from './data'; new Vue({ el: '#app', data: function () { var json = getData(); return { dataBad: JSON.parse(json), dataGood : JSON.parse(json, (key, value) => { if (typeof value === 'string') { // Parse dates saved as JSON-strings let m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/); if (m) { return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6])); } // // Parse dates saved as OData-style strings m = value.match(/^\/Date\((\d+)\)$/); if (m) { return new Date(parseInt(m[1])); } } return value; }) } } }) </script> <style> .container-fluid .wj-flexgrid { max-height: 250px; } body { margin-bottom: 36pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Loading JSON Dates</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { let json = '[' + '{"id":0,"country":"US","sales":489.51,"expenses":2358.24,"date":"2017-02-08T12:47:06.405Z"},' + '{"id":1,"country":"Germany","sales":7803.20,"expenses":2513.54,"date":"2017-02-09T12:47:06.405Z"},' + '{"id":2,"country":"UK","sales":9996.58,"expenses":2616.71,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":3,"country":"Japan","sales":9351.68,"expenses":3030.59,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":4,"country":"Spain","sales":349.51,"expenses":7358.24,"date":"/Date(1486561758556)"}' + ']'; // return json; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); var json = getData(); this.state = { dataBad: JSON.parse(json), dataGood: JSON.parse(json, (key, value) => { if (typeof value === 'string') { // Parse dates saved as JSON-strings let m = value.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/); if (m) { return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6])); } // // Parse dates saved as OData-style strings m = value.match(/^\/Date\((\d+)\)$/); if (m) { return new Date(parseInt(m[1])); } } return value; }) }; } render() { return <div className="container-fluid"> <p> Here's an example: note how the "Date" column contains strings: </p> <wjGrid.FlexGrid itemsSource={this.state.dataBad}> </wjGrid.FlexGrid> <p> Here is a grid showing the same data, this time parsed with a date reviver function: </p> <wjGrid.FlexGrid itemsSource={this.state.dataGood}> </wjGrid.FlexGrid> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; } body { margin-bottom: 36pt; } export function getData() { let json = '[' + '{"id":0,"country":"US","sales":489.51,"expenses":2358.24,"date":"2017-02-08T12:47:06.405Z"},' + '{"id":1,"country":"Germany","sales":7803.20,"expenses":2513.54,"date":"2017-02-09T12:47:06.405Z"},' + '{"id":2,"country":"UK","sales":9996.58,"expenses":2616.71,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":3,"country":"Japan","sales":9351.68,"expenses":3030.59,"date":"2017-02-10T12:47:06.405Z"},' + '{"id":4,"country":"Spain","sales":349.51,"expenses":7358.24,"date":"/Date(1486561758556)"}' + ']'; // return json; }