Using Google's Closure Compiler to Optimize JSON Files

When dealing with a json string that is parsed and properties of the object are accessed using dot notation, a warning may be triggered by the google closure compiler stating that the property is not defined.

To overcome this issue, one workaround is to convert the code into bracket notation (MyObject['PropertyName']) which removes the warning but hinders the compiler's optimizations. However, when using JSON.stringify(MyObject), the server can receive a string with understandable property names.

Therefore, the question arises: How can we effectively utilize the google compiler in advanced mode when working with json objects that undergo deserialization and serialization at runtime?

Answer №1

When dealing with JSON objects, you have a couple of options:

  1. Access object properties using the string literal (e.g., MyJsonObject['PropertyName']) for a straightforward approach.
  2. Create an external file that outlines the properties in your JSON object and then utilize dot notation (e.g., MyJsonObject.PropertyName). While this method requires more upkeep, it allows for type checking by the compiler if type annotations are provided in the external description.

Answer №2

If you are solely using JavaScript to access external json data, it may negate the purpose of utilizing a compiler. However, if your JavaScript involves more tasks beyond just parsing json into domain models, then the compiler can prove to be beneficial.

In our parsing process, we retrieve data using bracket notation and then organize it into our own models, which provide us with type checking and other advantages.

When it comes to handling data, I make use of the XHRManager class, which has been incredibly useful for managing data events efficiently.

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

I must admit that my handling of XHRManager is still a work in progress, as I only recently started implementing it in my codebase.

For parsing tasks, I follow this approach: (Please excuse any rough portions from my code snippet.)

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.
  }
};

Answer №3

NOTE: The use of the @expose directive has been deprecated


Google Closure Compiler allows for specifying directives on how compilation should be handled using annotations.

Check out: https://developers.google.com/closure/compiler/docs/js-for-compiler

By correctly utilizing @expose and @type, you can maintain the name of a property in your code.

You can safely decode a JSON string into an object and access that object using dot notation. Additionally, you'll be able to stringify the data back.

-

Let's illustrate with an example:

Say you want to interpret an array of objects. Each object represents a "size", with the properties w for width and h for height.

Create a prototype for the size object and expose its properties w and h

function size() {}

/** @expose */
size.prototype.w = 0;
/** @expose */
size.prototype.h = 0;

Next, you aim to insert the JSON parsed data into an array named data.

Using @type, specify that data will contain an array of objects of type size.

function main()
{
    /** @type {Array.<size>} */
    var data;

    // creating a sample response string
    var response = '[{"w": 10, "h": 20}]';

    // parsing the array
    var data = JSON.parse(response);

    // accessing data using dot notation!
    console.log(data[0].w+ "    "+ data[0].h);
}

main();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Array's Javascript length of 0

I have encountered some strange behavior with the following code. It's displaying an array length of 0 even though I can see a length greater than 0 when printing it right before that: var getTopSelection = function(callback) { var topSelection = ...

Supply mandatory argument along with varying arguments to the function

I have a function that requires one parameter and a dynamic set of additional parameters. I am passing an array of blobs to the function. Below is a simplified version of the function: function test(directory, blob0, blob1) { for (var argumentIndex = 1; ...

having trouble accessing a JavaScript array in AngularJS

Hey there, I'm currently working on a web application using AngularJS and I'm facing an issue with querying arrays. Check out the code snippet below: var angulararray = []; bindleaselistings.bindleaselistingsmethod().then(function(response) { ...

Encountering the error "ValueError: No Json object could be decoded" while executing a Python MapReduce script using Hadoop Streaming

I'm in the process of running a basic Python mapreduce script on Hadoop using streaming. The mapper section is responsible for loading a JSON document, extracting text from a property, and outputting each word with a count of 1, which will later be co ...

WSO2 does not accept the use of the '@' symbol as an input parameter in its methods

Every time I try to input an @ symbol, instead of the expected empty list of roles, I get an error. The function in question is roles(), with the input parameter being the last part of the URL. I specifically need to use the @ symbol as I intend to use ema ...

Utilize or Bring in an external JavaScript file within Ionic 2

Currently working with Ionic 2 and Typescript Angular 2 and facing an issue. I need to utilize an external JavaScript file located at . How can I import or include this in my project? ...

Enhance the efficiency of dynamically incorporating views into a design

I am currently working on an app that involves handling forms with different categories such as A, B, C, and D. When I receive a JSON form from the server, I need to convert it into a user-friendly Form layout. Forms can vary greatly in size, ranging f ...

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

NodeJS controller function to generate and send a response

I'm facing an issue with my controller method where I am unable to send a response to the user, even though the value is displaying in the console. Below is my code snippet: const hubHome = (req,res) => { const hubId = req.params.hubId; fetch ...

An issue arises in vue.js where the v class binding takes precedence over other bindings and fails to properly remove

I have a game with a punching bag where I want to incorporate an animation class each time the bag is clicked. Once the health meter hits zero, I intend to replace the bag image with one depicting a burst bag. Things are running smoothly up until the poin ...

The image file that was uploaded from a React Native iOS application to Azure Blob Storage appears to be corrupted or incomplete as it is not

Struggling to develop a feature in a React Native mobile app where users can upload and crop their profile picture, then store it in Azure blob storage. I encountered difficulty with implementing react-native-fs as many resources recommended it, but I kep ...

Having trouble with adding an event listener on scroll in React JS. Need assistance in resolving this issue

I'm having trouble adding an event listener for when a user scrolls in my web app. componentDidMount = () => { let scrollPosition = window.scrollY; let header = document.getElementById("topBar"); window.addEventListener(&ap ...

The list indexes are required to be either integers or slices, not strings. Additionally, the JSON object should be a string, bytes, or bytearray, not a list

Looking at the code snippet below, I'm in the process of developing a function that aims to retrieve the order ID of a trade from Binance. Despite receiving all trade data in JSON format, I encountered two errors when attempting to access the data usi ...

When using HTML5's checkValidity method, it may return a valid result even if

Consider the following scenario: <input pattern="[a-z]"/> If you run the command below without entering any input: document.querySelector('input').checkValidity() You will notice that it actually returns true. This seems counterintuiti ...

How can I target only one mapped item when using onClick in React/NextJS?

Apologies if this question is repetitive, but I couldn't find a better way to phrase my issue. The code in question is as follows: const [isFlipped, setFlipped] = useState(false); const flip = () => { if (!isFlipped) { setFlipped(tr ...

Exploring the capabilities of SVG and audio integration in web browsers

I am curious if it's possible to incorporate audio into an SVG file in a web browser. I came across this thread here, but unfortunately, I can't leave a comment =/ I tried implementing the code from this website, but it doesn't seem to work ...

Transform the text area in preparation for a GET request

Trying to figure out how to pass the text from a textarea into the source attribute of an image tag while retaining all formatting, including line breaks. After some research, it seems that the best way to accomplish this is by base 64 encoding the text a ...

Whenever I execute the 'ng serve' command, I encounter an issue with ineffective mark-compacts close to the heap limit, resulting in an allocation failure and a JavaScript

I'm currently using Angular 9 and Node.js 12. When I input ng serve, I encounter the following problem: C:\Users\homz\my-app>ng serve 93% after chunk asset optimization SourceMapDevToolPlugin vendor.js generate SourceMap <--- ...

When the window size is reduced, the navigation vanishes

Whenever I resize the window, the navigation bar disappears. Here is the image of the page before resizing the window https://i.sstatic.net/UiRB9.png Below is the image after resizing the window https://i.sstatic.net/X00d2.png Displayed below is the cod ...

Invoking PHP function within a specific class using Ajax

I am currently utilizing Zend Framework. My PHP class is structured as follows: FileName : AdminController.php Path : /admin/AdminController.php Ajax Function : function exportToExcel() { $.ajax({ url: "/admin/AdminController/testFunction", ty ...