datajs DateTime sample

  • Article

Building on the dev notes I recently posted, here is a short sample page you can use to try the new datajs-0.0.2 library out. Just download the files to your local disk and add this HTML file there, then you can point your browser to it. The event handling style is pretty horrible, but it's as short as I could write it without having to go into how to hook up events, which you probably know anyway (else, leave me a note and I'll get to that in a future post).

<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>DateTime Sample</title>
<script type="text/javascript" src='https://github.com/douglascrockford/JSON-js/raw/master/json2.js'></script>
<script type="text/javascript" src='datajs-0.0.2.min.js'></script>
</head>
<body>
<button onclick='
OData.jsonHandler.recognizeDates = !OData.jsonHandler.recognizeDates;
'>Toggle recognizeDates</button>
<button onclick='
if (OData.defaultMetadata.length > 0) {
  // Reset metadata.
  OData.defaultMetadata = [];
} else {
  // Push a schema object with just one declared entity type and property.
  OData.defaultMetadata.push(
    { namespace: "NetflixCatalog.Model",
      entityType: [ {
        name: "Title", property: [
          { name: "DateModified", type: "Edm.DateTime" }
        ] } ]
    }
  );}
'>
Toggle metadata
</button>

<button onclick='
var target = document.getElementById("outputDiv");
target.innerHTML =
  "defaultMetadata #: " + OData.defaultMetadata.length + "<br />" +
  "recognizeDates: " + OData.jsonHandler.recognizeDates + "<br />" +
  "<br />";
OData.defaultHttpClient.enableJsonpCallback = true;
OData.read("https://odata.netflix.com/v1/Catalog/Titles?$top=10",
  function (data) {
  for (var n in data.results) {
    var i = data.results[n];
    target.appendChild(
      document.createTextNode(i.Name + " - " + i.DateModified));
    target.appendChild(
      document.createElement("BR"));
  }
});
'>Refresh</button>
<div id='outputDiv'></div>

</body>
</html>

Let's analyze this a bit.

  • The first button simply toggles the 'recognizeDate' value on the JSON handler. It defaults to false, which means that strings won't be pattern-matched to Dates.
  • The second button toggles bit of metadata, just enough to recognize the DateModified property of Title entities as a Date.
  • The last button simply enables JSONP in the library and fires off a request for a few Netflix titles, then outputs the settings along with the title names and their DateModified titles.

Depending on the values you set up for the settings using the original buttons, you'll see output similar to the following:

defaultMetadata #: 0
recognizeDates: false

Red Hot Chili Peppers: Funky Monks - /Date(1282379236000)/
Rod Stewart: Storyteller 1984-1991 - /Date(1254891982000)/

The above shows string values - there is no metadata to tell us they are Date values, and recognizeDates is false (the default).

defaultMetadata #: 0
recognizeDates: true

Red Hot Chili Peppers: Funky Monks - Sat Aug 21 01:27:16 PDT 2010
Rod Stewart: Storyteller 1984-1991 - Tue Oct 6 22:06:22 PDT 2009

The above shows Date values, becase I turned recognizeDates to true. If someone had sneaked in a value where it wasn't supposed to, however, we would have seen the Date show up like that.

defaultMetadata #: 1
recognizeDates: false

Red Hot Chili Peppers: Funky Monks - Sat Aug 21 01:27:16 PDT 2010
Rod Stewart: Storyteller 1984-1991 - Tue Oct 6 22:06:22 PDT 2009

The above shows Date values, because I included metadata. This is the preferred solution to get Date values.

defaultMetadata #: 1
recognizeDates: true

Red Hot Chili Peppers: Funky Monks - Sat Aug 21 01:27:16 PDT 2010
Rod Stewart: Storyteller 1984-1991 - Tue Oct 6 22:06:22 PDT 2009

The above shows Date values because I included metadata. Even though recognizeDates is true, when we do have metadata for an entity, we will never try to pattern-match to it.

Enjoy!