RadiantQ jQuery Gantt Package
JSON Data
Previous Topic  Next Topic 

JSON is most common data-interchange language, which can be easily parsed into a JavaSript object. JSON however doesn't define any standard way to represent the date time and time span format. The server code could choose to represent this in many different ways. In this topic we are going to describe how to parse such date-time and time-span strings into their corresponding JS objects.


RadiantQ has an extended version of the $.parseJSON which is used to convert JSON to JS object and it takes the following arguments.


Arguments

Description

  jsonString (string)

A well-formed JSON string which is converted into the returned Java Script object.

  canConvterDefaultFormat (boolean)

To specify whether to convert the default date string into date object

  ConvertTolocalTime (boolean)

if its true it converts GMT dates to local time.

  DataConverter (function)

An optional function which if specified, is called for each string value in the json string, to be converted into a JS object.


Here is the example.


$.parseJSON(jsonString, true, true);


Default Date and TimeSpan formats supported

The default date string formats which the $.parseJSON can handle are:


1) YYYY-MM-ddTHH:mm:ssZ

2) YYYY-MM-ddTHH:mm:ss

3) .NET Date (Date(1224043200000) / Date(-1224043200000))

4) date time with time Zone (Tue May 05 2015 13:14:17 GMT+0530 (India Standard Time))


The default time span formats supported are:


1) HH:mm:ss

2) dd.HH:mm:ss / d.HH:mm:ss 


Here is an example JSON data.


[{

    "Name" : "Task 1",

    "ID" : 1,

    "StartTime" : "2014-02-02T00:00:00Z",

    "Cost" : "200",

    "Effort" : "8:00:00",

    "Description" : "Description of Task 1"

},

{

    "Name" : "Task 2",

    "ID" : 2,

    "Cost" : "300",

    "PredecessorIndices" : "1",

    "StartTime" : "2014-02-03T00:00:00Z",

    "Effort" : "1.20:00:00",

    "Description" : "Description of Task 2"

}]


Handling custom Date and TimeSpan strings

The 4th "data converter" argument can be used to convert a custom string format to a appropriate object.

Here is an example for that.


NOTE: Assume the file name is sampleTask.json, containing this data:


[{

    "Name" : "Task 1",

    "ID" : 1,

    "StartTime" : "\/Date(1414782000000+0500)\/",

    "Cost" : "200",

    "Effort" : "8:00:00",

    "Description" : "Description of Task 1"

},

{

    "Name" : "Task 2",

    "ID" : 2,

    "Cost" : "300",

    "PredecessorIndices" : "1",

    "StartTime" : "\/Date(1409511600000+0500)\/",

    "Effort" : "1.20:00:00",

    "Description" : "Description of Task 2"

}]



Call RadiantQ $.parseJSON with this "data converter".


$.ajax({

    type: "GET",

    dataType: 'json',

    url: "sampleTask.json",

    ContentType: "application/json; charset=utf-8",

    converters:

    {

        "text json": function (data) {

            return $.parseJSON(data, true,

                true,

                //Data conaverter function,

                //key - is the name for the field.

                //value - field value.                .

                function (key, value) {


                    if (key == "StartTime") {

                        //Custom string format expression.

                        var dateNet = /\/Date\(([0-9]+)([-+])([0-9]+)\)\//;


                        if (dateNet.test(value)) {

                            var regex = value.match(dateNet);

                            var millisecs = parseInt(regex[1]);

                            //Convert string into the date object.

                            return new Date(millisecs);

                        }

                    }


                });

        }

    },

    success: function (data) {

        // data hold the js array of tasks.

    }

});




© RadiantQ 2022. All Rights Reserved.