Open Automation Software
Moving Data From Anywhere to Anywhere
1-303-679-0898

What is JSON?

JSON-icon-2An Essential Part of the Web Developer’s Toolkit

If you’ve done any web development, you’ve probably seen mentions of JSON. In fact, if you’ve done any Javascript development lately, chances are good that you’ve even used JSON. It has become one of the most important tools in a JS developer’s toolkit. So what exactly is JSON?

What is JSON?: Javascript Object Notation

In short, JSON stands for JavaScript Object Notation, and is a concise hierarchical data serialization syntax that is supported by all modern browsers.

Its format makes it a lightweight way of representing objects, while remaining human-readable. For this reason it has replaced XML notation on many platforms.

XML is fantastic at describing object hierarchies and even semantics, but adds a great deal of overhead to the serialized object.

For example, the following is an example of a simple User object serialized to XML:

As you can see, the same data represented in JSON is far more efficient, while retaining all of its human-readability:

JSON is Cross-Platform

Since browser support is so widespread, JSON is also a cross-platform way representing data. This is the real power of JSON. It can be used natively within Javascript without any parsing, interpretation or 3rd party libraries.

JSON objects can be passed around in variables and used as arguments of functions:

Referencing Values within JSON Object

As you can see, referencing values within a JSON object can done using the “.” notation to denote hierarchy. In the example above, you can see that the value in the “SKU” field is a string “123456” but the “quantity” field is a numeric 9.

JSON values can be any one of the following:

  • string (contained with quotes)
  • number (integers and decimals)
  • boolean (written as true or false, without quotes)
  • object (wrapped in curly braces, thus creating a hierarchy)
  • array (wrapped in square brackets and arrays can contain lists of any type, including mixed types)
  • null (written exactly as null to denote a non-value)

This is an example of a JSON object using all data types:

Using JSON in the OAS HTML Connector

The quickest and simplest way to add real time data and control to your web applications is through the OAS HTML Connector. This technology lets you read and write real time data, display it in HTML elements and even control look and feel based on live server data.

All of these settings are applied as HTML attributes containing JSON to define behavior. After adding script reference to the OAS Web HMI libraries in your web page, applying attributes to your HTML elements will add real time data and customizable behavior to your application.

The simplest example of this is if you want to display a single real time server tag value in the following HTML DIV element:

Just add the opc-tag-txt attribute to start displaying the current value of the “Pump.Value”:

A more complex example shows how you can use a series of boolean server tags to change the background color of a div when each evaluates to true, or when all are false:

In this example, the opc-tag-bkg attribute controls the background color under several conditions. The “group” field is an array of configurations containing a tag and color which are tested in order, using the first value that evaluates to True:

  • In this case, if Pump.Value evaluates to True, then the background color will be set to the HTML color of “#00F”, a bright blue.
  • If Pump.Value is False and Pump2.Value is True, the color will be set to “#080”, a green.
  • If both are False, the “all_f” color of “#F00” is used, setting the background to red.
  • If any value returns bad data quality from the server, “bad_q” will be used, setting it to “#FC0” or yellow.

Learn More

For OAS Web HMI documentation, including a list of all attributes and how to use them, see our API reference at: Programming Reference – Web HMI