google closure compiler and json

Question

I have a json string that I parse and then access the properties of the object with the dot notation. However, in the google closure compiler, the dot notation (MyObject.PropertyName) gives warning that the property isn't defined.

For now, the solution I'm using is to convert my code into bracket notation (MyObject['PropertyName']). This removes the warning but also prevents the compiler from doing its job. On the other hand, when I write JSON.stringify(MyObject), the server receives a string with property names that are understandable.

So my question is how do we best use the google compiler in advanced mode when working with json objects that are deserialized and serialized at runtime.

Answer 1

You basically have two choices:

1. use object array access using the string literal (aka MyJsonObject['PropertyName']) this is the simple solution.
2. create a extern file describing the properties in your JSON object and then use dot notation (aka MyJsonObject.PropertyName). This requires more maintenance but allows the compiler to type check the properties if you provide type annotations in your extern description.

Answer 2

If the only JavaScript you are going to write is accessing external json, then it defeats the point of using the compiler. However, if you have even a trivial amount of JavaScript which does work besides parsing your json into domain models then the compiler may be useful.

In our parsers we access our data via bracket notation so we can get the data properly. From there we stuff the data into our own models, which we use the . notation on. These get wildly renamed, gives us type checking and all of that goodness.

Edit>> For data I use the XHRManager. This is one seriously nice class. When I get a data event from that pool I handle it as follows.

/**
 * @private
 * @param {goog.events.Event} evt The event recieved from the XhrIo.
 */
mypath.MyClass.prototype.onDataRecieved_ = function(evt) {
  if (evt.type != 'complete') return;
  var xhrIo = evt.target;
  var data = xhrIo.getResponseJson();
  //do somethign!
};

I have to warn you, my XHRManager handling still leaves a fair bit to be desired. I only refactored my code last week to start using it.

For parsing I do this: (This is some raw stuff from my code base, so ignore some of the ugly.)

our.class.path.ContestJsonParser.prototype.setContestProperties =
    function(contest, element) {
  contest.setName(element['description']);
  /**
     * @type {!number}
     */
  var timeAsInt = element['startTime'];
  contest.setScheduledStartTime(timeAsInt);
  var clockModel = contest.getClockModel();
  if (goog.isDefAndNotNull(element['period'])) {
    clockModel.setMatchState(element['period']['periodName']);
    clockModel.setStateStartTime(element['period']['periodStartTime']);
  }
  //TODO (Johan) this needs to change today to consider the rest of the stats
  //information
  var stats = element['statistics'];
  if (goog.isObject(stats) && goog.isDefAndNotNull(stats['score'])) {
    var score = stats['score'];
    contest.setMatchScore(score['home'], score['away']);
  } else {
    contest.setMatchScore(undefined, undefined); // clears score.
  }
};