DEV Community

Cover image for Advanced JSON Path Operations in WebForms Core 2.1
Elanat Framework
Elanat Framework

Posted on

Advanced JSON Path Operations in WebForms Core 2.1

#json #hitech #innovation #webformscore

At Elanat, we have enhanced the standard JSON CRUD operations in our WebForms Core technology with powerful new features in WebForms Core 2.1, including advanced path expressions, conditional queries (such as [field=value]), negative indexing (such as [-1] for the last element), and logical operators (AND/OR), all integrated directly into the existing functions without breaking backward compatibility.

These capabilities are available through the WebForms Class on the server side. The WebForms Class generates Commander instructions, while WebFormsJS executes those instructions in the browser.

JSON Operations

WebForms Core provides JSON operations through the following server-side methods:

form.AddJSON(Key, Path, Value);
form.UpdateJSON(Key, Path, Value);
form.DeleteJSON(Key, Path);
Enter fullscreen mode Exit fullscreen mode

These methods generate JSON Commander instructions that are later interpreted and executed by WebFormsJS.

For example:

form.UpdateJSON("users", "[age>30].name", "John");
Enter fullscreen mode Exit fullscreen mode

The server does not directly modify the JSON object. Instead, it generates a Commander instruction describing the requested operation.

WebFormsJS receives this instruction and internally executes the corresponding JSON operation.

Add JSON

Use AddJSON to add a value to JSON data.

form.AddJSON("users", "", "{\"name\":\"John\",\"age\":25}");
Enter fullscreen mode Exit fullscreen mode

The first parameter identifies the JSON data, the second specifies the path, and the third contains the value to add.

For an array, an empty path adds the value to the array.

form.AddJSON("users", "", "{\"name\":\"John\",\"age\":25}");
Enter fullscreen mode Exit fullscreen mode

Update JSON

Use UpdateJSON to update a value at a specific JSON path.

form.UpdateJSON("users", "[0].name", "John");
Enter fullscreen mode Exit fullscreen mode

This updates the name property of the first element in the users array.

Nested paths are also supported:

form.UpdateJSON("users", "[0].address.city", "Baku");
Enter fullscreen mode Exit fullscreen mode

Delete JSON

Use DeleteJSON to remove a value from JSON data.

form.DeleteJSON("users", "[0].phone");
Enter fullscreen mode Exit fullscreen mode

This removes the phone property from the first element of the users array.

Array elements can also be addressed by index:

form.DeleteJSON("users", "[0]");
Enter fullscreen mode Exit fullscreen mode

Advanced JSON Paths

JSON paths support several forms of array indexing and conditional selection.

Advanced JSON in WebForms Core Technology

Standard Array Index

An array element can be selected using an index:

form.UpdateJSON("users", "[0].name", "John");
Enter fullscreen mode Exit fullscreen mode

The following forms can also be used for array indexes:

[0]
[1]
[2]
Enter fullscreen mode Exit fullscreen mode

Numeric path components are also supported where applicable.

Negative Array Indexing

WebForms Core supports negative indexes for arrays.

[-1]
Enter fullscreen mode Exit fullscreen mode

refers to the last element.

For example:

form.UpdateJSON("users", "[-1].name", "John");
Enter fullscreen mode Exit fullscreen mode

This updates the name property of the last element in the users array.

Other negative indexes can be used as well:

[-1]   Last element
[-2]   Second-to-last element
[-3]   Third-to-last element
Enter fullscreen mode Exit fullscreen mode

Negative indexing is especially useful when the position of the desired element is relative to the end of an array.

Conditional JSON Queries

Array elements can be selected using conditions inside brackets.

For example:

[age>30]
Enter fullscreen mode Exit fullscreen mode

selects an array element whose age satisfies the specified condition.

A server-side operation can therefore be written as:

form.UpdateJSON("users", "[age>30].status", "active");
Enter fullscreen mode Exit fullscreen mode

The condition is interpreted by the JSON Executor in WebFormsJS when the generated Commander is executed.

Supported comparison operators are:

=
==
!=
>
<
>=
<=
Enter fullscreen mode Exit fullscreen mode

For example:

form.UpdateJSON("users", "[age=30].status", "active");

form.UpdateJSON("users", "[age>=18].status", "adult");

form.UpdateJSON("users", "[age<18].status", "minor");

form.UpdateJSON("users", "[age!=30].status", "unknown");
Enter fullscreen mode Exit fullscreen mode

Contains Operator

The ~= operator checks whether the string representation of a field contains the specified value.

Example:

form.UpdateJSON("users", "[name~=John].status", "matched");
Enter fullscreen mode Exit fullscreen mode

This condition matches an element whose name contains John.

Quoted values can also be used:

[name~="John"]
Enter fullscreen mode Exit fullscreen mode

Nested Properties in Conditions

Conditions can reference nested properties using dot notation.

For example:

[scores.math>=18]
Enter fullscreen mode Exit fullscreen mode

can be used to examine a nested math property.

A server-side operation can therefore be written as:

form.UpdateJSON(
    "students",
    "[scores.math>=18].status",
    "passed"
);
Enter fullscreen mode Exit fullscreen mode

This allows conditions to be evaluated against nested JSON objects.

Logical AND

Multiple conditions can be combined with AND.

Example:

[age>=18 AND status=active]
Enter fullscreen mode Exit fullscreen mode

A server-side operation can use this expression directly:

form.UpdateJSON(
    "users",
    "[age>=18 AND status=active].verified",
    "true"
);
Enter fullscreen mode Exit fullscreen mode

Both conditions must be satisfied by the matched array element.

Logical OR

Conditions can also be combined using OR.

[role=admin OR role=manager]
Enter fullscreen mode Exit fullscreen mode

For example:

form.UpdateJSON(
    "users",
    "[role=admin OR role=manager].access",
    "full"
);
Enter fullscreen mode Exit fullscreen mode

The element is considered a match when at least one of the conditions is satisfied.

Combining Conditions with Nested Paths

Conditional expressions can be combined with nested paths.

For example:

form.UpdateJSON(
    "students",
    "[scores.math>=18 AND scores.english>=18].status",
    "passed"
);
Enter fullscreen mode Exit fullscreen mode

This demonstrates the combination of:

  • Array conditions
  • Comparison operators
  • Nested properties
  • Logical AND
  • Server-side JSON Commander generation

Conditional Queries Select an Element

An important implementation detail is that conditional path resolution currently resolves the first matching array element.

The internal WebFormsJS implementation uses findIndex() when evaluating conditional queries.

Therefore, an expression such as:

[age>30]
Enter fullscreen mode Exit fullscreen mode

does not mean "all elements where age is greater than 30."

It resolves to the first matching element.

For example, if the JSON contains:

[
    { "name": "Ali", "age": 25 },
    { "name": "Reza", "age": 35 },
    { "name": "Sara", "age": 40 }
]
Enter fullscreen mode Exit fullscreen mode

then:

form.UpdateJSON(
    "users",
    "[age>30].name",
    "John"
);
Enter fullscreen mode Exit fullscreen mode

targets the first matching element, which is:

{ "name": "Reza", "age": 35 }
Enter fullscreen mode Exit fullscreen mode

It does not update Sara as well.

This distinction is important when using conditional JSON paths.

Fetch and Format Store

WebForms Core also provides JSON-related commands through the Fetch Class.

For example:

Fetch.LoadJSON(Url, Name);
Enter fullscreen mode Exit fullscreen mode

generates a Commander for loading JSON data.

The FormatStoreByJSONQuery method can be used to generate a JSON query operation against a Format Store:

Fetch.FormatStoreByJSONQuery(Key, Query);
Enter fullscreen mode Exit fullscreen mode

These methods also follow the Commander–Executor architecture.

The server creates the instruction, while WebFormsJS executes it in the browser.

Commander–Executor Architecture

The JSON system should not be interpreted as a collection of public JavaScript APIs.

The architecture is divided into two responsibilities.

WebForms Class — Commander

The server-side WebForms Class provides methods such as:

form.AddJSON(...);
form.UpdateJSON(...);
form.DeleteJSON(...);
Enter fullscreen mode Exit fullscreen mode

These methods generate Commander instructions.

For example:

form.UpdateJSON("users", "[age>30].name", "John");
Enter fullscreen mode Exit fullscreen mode

is a server-side API.

WebFormsJS — Executor

WebFormsJS receives the generated Commander and executes it.

Internally, WebFormsJS contains functions such as:

cb_GetJSON
cb_SetJSON
cb_AddJSON
cb_DeleteJSON
Enter fullscreen mode Exit fullscreen mode

These are implementation functions of the Executor.

They should not be confused with the public server-side WebForms API.

Summary

WebForms Core 2.1 provides advanced JSON path capabilities through its Commander–Executor architecture.

The server-side API includes:

AddJSON()
UpdateJSON()
DeleteJSON()
Enter fullscreen mode Exit fullscreen mode

and the Fetch Class provides:

LoadJSON()
FormatStoreByJSONQuery()
Enter fullscreen mode Exit fullscreen mode

Supported JSON path features include:

  • Standard array indexing
  • Negative array indexing such as [-1]
  • Conditional queries
  • =
  • ==
  • !=
  • >
  • <
  • >=
  • <=
  • ~=
  • Nested property access
  • AND
  • OR

The important distinction is that these features are used through server-side Commander methods. WebFormsJS is responsible for executing the generated commands in the browser; its internal JavaScript functions are not intended to be called directly by application developers.

This approach keeps WebForms Core's server-centric programming model intact while allowing sophisticated JSON manipulation to be executed efficiently on the client.

Top comments (0)