JSON patterns

The following examples demonstrate that using myPatterns/JS, the JSON notation can not only be used to serialize data for external use and to parse it back, but also to select data by matching, i.e. filter from a data sequence all the data matching some pattern and extract some sub-data thereof, declaratively, in a single step.

selecting data

Let us say that you have an array of data called persons. For instance, if you are writing an AJAX client, the array may come from a response from the server, sent in JSON or XML notation and parsed as a native JavaScript array:

var persons =
[{name: {firstname: "John", lastname: "Smith"}, 
  children:[{firstname: "Eric", gender: "male", born: 1991}, 
            {firstname: "Deborah", gender: "female", born: 1996}]},
 {name: {firstname: "Kevin", lastname: "Carrera"}, 
  children:[]},
 {name: {firstname: "Matt", lastname: "Johnson"}, 
  children:[{firstname: "Sarah", gender: "female", born: 1978},
            {firstname: "Suzy", gender: "female", born: 1979}]}];

Using myPatterns/JS, you can extract some information from this array by the following simple call, mentioning a JSON pattern:

selectMatching(persons, "{name:{lastname:%l,firstname:%f},children:[{born:%x},{born:%y}]}");

This call returns the following array, containing the extracted information (the name of the persons having two children, and the year of birth of these latters):

[{l:"Smith", f:"John", x:1991, y:1996}, 
 {l:"Johnson", f:"Matt", x:1978, y:1979}]

try it yourself

Edit the pattern below to select different values, then click on the button to print the result:

Result:

Hints:

you may use the wildcard "%_" within patterns to match something without extracting its value; for instance the pattern "{name:{lastname:%l}, children: [%_, %_]}" selects all the persons having exactly two children, without detailing these latters
you may use the "|" notation to match (or discard!) the tail of an array; for instance, the pattern "{children: [{firstname: %x} | %_], name:{lastname: %l}}" selects all the elder children

customizing the selection

It is also possible to customize the selected items, by supplying a second, optional argument to function selectMatching(). This optional argument must be a function taking a substitution (the result of a match) and returning a value to be put in the selection:

selectMatching(persons, "{name:{lastname:%x}}", 
               function(s) { return s.x + "-san"; });

Output:

selecting data into an HTML table

Selecting data into a JavaScript array is useful for processing it further, but ultimately you would probably want to display it in the browser. For that, you can use the tableMatching function that extracts the information as a HTML table. For instance, the following call:

tableMatching(persons, "{name:{lastname:%l,firstname:%f},[{born:%x},{born:%y}]}");

builds the following HTML table, containing the extracted information:

L	F	x	y
Smith	John	1991	1996
Johnson	Matt	1978	1979

try it yourself

Edit the pattern below to select different values, then click on the button to print the table:

Output:

customizing the table rows

As for the selectMatching function above, it is possible to customize the rows in the table, by supplying a second, optional argument to function tableMatching. This optional argument must be a function taking a substitution (the result of a match) and returning an XHTML table row:

tableMatching(persons, "{name:{lastname:%x}}", 
              function(s) { 
                return '<tr><td>' + s.x + '</td> <td>-san</td></tr>'; 
              });

Output: