Loading...

The previous chapters explained the Object and Member Notation in Widget Designer, this chapter will give you a quick overview of the JavaScript Object Notation, a format for easily storing, editing and exchanging data.

Additionally, you will learn how to make use of this format in your Widget Designer project.

What is JSON?

JSON, or JavaScript Object Notation, is a format designed for data exchange. It derived from JavaScript, but is by now also included in many other programming languages.

One of its advantages is that the stored data consists of human readable text and is based on a very simple and straight forward structure.

Each set of data consists of a key and a value, separated by a colon ":". Several sets can be separated by a comma "," and a collection of sets of data is called a JSON object, enclosed in curly brackets "{ }".

A key is always a string, enclosed in double quotation marks, a value can be one of the following types:

Number: Can be either an integer or a decimal number, exponential E notation is possible, too.

String: a sequence of characters, delimited with double quotation marks

Boolean: either one of the expressions true or false

Array: an ordered list of zero or more values of any type, delimited with square brackets "[ ]"

Map (Object): JSON objects are nestable, so an object can always contain another object, called map.

null: an empty value indicated with the expression null

White spaces, line feeds and tabs don't affect the functionality of the object, but can be used to arrange code.

Example

{

 "company": "Christie",

 "year_founded": 1929,

 "over_1000_employees": true,

 "products": {

         "media_server":"Pandoras Box",

         "projector":"D4K40",

         "video_wall":"MicroTiles LED"

 }

}

 

How to use JSON in Widget Designer?

JSON is available as a global variable: simply right-click on the variable list, choose "Create > Json" and enter a name and a value. As a JSON object can be quite large and hard to overview, it might be easier to write the complete object down in a script window and then either copy and paste the whole text into the "Value" field, or directly assign the value via a script to an empty JSON variable.

Other than other variable types, the automatic type recognition for local variables is not available for the JSON type. You would have to type in a string with the correct format (pay attention to use the single quotation marks ' '  to indicate the string!) and convert it via the .ToJson member:

var participant1 = '{

 "name":"Jonathan",

 "age":27,

 "nationality":"UK",

 "languages": {

         "English":"expert",

         "French":"basic",

         "Spanish":"advanced",

         "other":["Russian-little","German-advanced"]

         }

}'.ToJson

 

Now you can make use of the various JSON members to update, retrieve and use the stored data. When accessing nested maps and arrays, the location is defined by a dot-separated path:

"participant1.Count("languages")" returns "4", "participant1.Count("languages.other")" returns "2".

 

It is even possible to store and readout data as a Session value by using the Context object:

Context.Session.Value("JSON_data") = participant1

Label1.Text = Context.Session.Value("JSON_data").ToJson.GetString("name")

-> Label1 shows "Jonathan"

For more detailed information on JSON and its syntax, please refer to: http://json.org/

 

What to Bear in Mind When Using JSON in WD

It is important to keep the JSON in the correct format if you want to make use of its members.
JSON has a very open and flexible syntax, there are many variations you can apply and still get valid JSON code without an error message.
If you want to make use of the many helpful JSON members, you need to pay attention to initializing the variable correctly and, if you add elements manually, the above explained format.
Using JSON members to set elements is not only comfortable, but also eliminates sources for syntax errors

They enable you to readout and edit elements in the JSON comfortably without editing the text directly, which eliminates sources for syntax errors.

var jsonLocal = '{}'.ToJson

 

If you have a global JSON variable without value, you still need to add the brackets. This can happen either with entering them in the Create / Edit dialog of the variable, or with the same script:

jsonGlobal = '{}'.ToJson

 

Not using the brackets will result in an invalid format of the variable and can cause issues.

When you fill your JSON with values, you need to pay attention to the correct format as well, any structures not confirming the JSON specifications can cause errors. Contents like the one shown below are not compatible as the necessary key/value assignment is not given:

var jsonLocal = '{0}'.ToJson