An 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:
<xml>
<user>
<firstName>Jason</firstName>
<middleName>Alexander</middleName>
<lastName>Smith</lastName>
<address>
<street1>1234 Someplace Avenue</street1>
<street2>Apt. 302</street2>
<city>Anytown</city>
<state>NY</state>
<postalCode>12345</postalCode>
<country>US</country>
</address>
</user>
</xml>
As you can see, the same data represented in JSON is far more efficient, while retaining all of its human-readability:
{
"firstName" : "Jason",
"middleName" : "Alexander",
"lastName" : "Smith",
"address" : {
"street1" : "1234 Someplace Avenue",
"street2" : "Apt. 302",
"city" : "Anytown",
"state" : "NY",
"postalCode" : "12345",
"country" : "US"
}
}
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:
function restockSKU(product) {
var prod = DB.getProductBySKU(product.SKU);
setProductStock(product.quantity);
}
var product = { "SKU" : "123456", "quantity" : 9 };
restockSKU(product);
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:
{
"username" : "user0012",
"age" : 21,
"active" : true,
"prefs" : {
"home" : "http://google.com",
"sessionExp" : 30,
"colors" : [ "#000", "#FC0", "#00C" ]
},
"referredBy" : null
}
Using JSON in the OAS Platform
The quickest and simplest way to add real time data and control to your web applications is through the Web HMI product. 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:
<div id="myValue" ></div>
Just add the opc-tag-txt attribute to start displaying the current value of the “Pump.Value”:
<div id="myValue" opc-tag-txt='{"tag":"Pump.Value"}'></div>
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:
<div id="myValue" opc-tag-bkg='{
"type" : "group",
"all_f" : {"color":"#F00"},
"bad_q" : {"color":"#FC0"},
"group" : [
{"tag":"Pump.Value","config":{"color":"#00F"}},
{"tag":"Pump2.Value","config":{"color":"#080"}}
]
}'></div>
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.
JSON in the OAS Platform
JSON Calculations
The OAS Calculation Engine provides several functions for locating, constructing, and modifying JSON objects and nodes.
Read more about JSON Calculations.
JSON Data Type
OAS Tags have their data type set to JSON which provides some automatic validation. This data type is essentially the same as a String, but performs JSON validation every time the value is updated. If the value cannot be converted to JSON, the Tag will report “bad quality”. This indication of quality can be used for many features within OAS, including data logging, alarming, and more.
JSON Data Source
Using the JSON Data Source allows you to define a base JSON structure and map keys to OAS Tag values. This feature is extremely useful for dynamically populating JSON data without requiring any string manipulation or complex calculations.
Read more about using the JSON Data Source.
Additionally, the OAS Platform supports the use of JSON in several other product features.
Read more about JSON in the OAS Platform.
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