|
This page includes various examples which illustrates solving various JSON related tasks using JSONER.
var json =
{
employee:
{
gid:102,
companyID:121,
defaultActionID:444,
names:
{
firstName:"Stive",
middleInitial:"Jr",
lastName:"Martin"
},
address:
{
city:"Albany",
state:"NY",
zipCode:"14410-585",
addreess:"41 State Street"
},
job:
{
departmentID:102,
jobTitleID:100,
hireDate:"1\/02\/2000",
terminationDate:"1\/12\/2007"
},
contact:
{
phoneHome:"12-123-2133",
beeper:"5656",
email1:"[email protected]",
fax:"21-321-23223",
phoneMobile:"32-434-3433",
phoneOffice:"82-900-8993"
},
login:
{
employeeID:"eID102",
password:"password",
superUser:true,
lastLoginDate:"1\/12\/2007",
text:"text",
regexp:/^mmm/,
date: new Date()
},
comment:
{
PCDATA:"comment"
},
roles:[
{
role:102
},
{
role:103
}]
}
};
var items =
{
items:[
{
employee:
{
gid:104,
companyID:131,
names:
{
firstName:"Mikie",
middleInitial:"Jr",
lastName:"Do"
},
address:
{
city:"Albany",
state:"NY",
zipCode:"14410-585",
addreess:"41 State Street"
},
job:
{
departmentID:102,
jobTitleID:100
},
contact:
{
phoneHome:"12-123-2133",
beeper:"56",
email:"[email protected]"
},
login:
{
employeeID:"eID101",
password:"password",
superUser:true
},
roles:[
{
role:102
},
{
role:103
}]
}
},
{
employee:
{
gid:105,
companyID:131,
names:
{
firstName:"Nick",
lastName:"Martin"
},
address:
{
city:"Albany",
state:"NY",
zipCode:"14410-585",
addreess:"41 State Street"
},
job:
{
departmentID:102,
jobTitleID:100
},
contact:
{
phoneHome:"12-123-2133",
beeper:"5656",
email:"[email protected]"
},
login:
{
employeeID:"eID103",
password:"password",
superUser:true
},
roles:[
{
role:102
},
{
role:103
}]
}
},
{
employee:
{
gid:106,
companyID:131,
names:
{
firstName:"John",
middleInitial:"Jr",
lastName:"Smith"
},
address:
{
city:"Albany",
state:"NY",
zipCode:"14410-585",
addreess:"41 State Street"
},
job:
{
departmentID:102,
jobTitleID:100
},
contact:
{
phoneHome:"12-123-2133",
beeper:"5656",
email:"[email protected]"
},
login:
{
employeeID:"eID104",
password:"password",
superUser:true
},
employee:
{
gid:1106,
names:
{
firstName:"Maxime",
middleInitial:"De",
lastName:"Lux"
}
},
roles:[
{
role:102
},
{
role:103
}]
}
},
{
employee:
{
gid:107,
companyID:131,
defaultActionID:444,
names:
{
firstName:"Mark",
lastName:"Martin"
},
address:
{
city:"Albany",
state:"NY",
zipCode:"14410-585",
addreess:"41 State Street"
},
job:
{
departmentID:102,
jobTitleID:100
},
contact:
{
phoneHome:"12-123-2133",
beeper:"5656",
email:"mark.com"
},
login:
{
employeeID:"eID105",
password:"password",
superUser:true
},
roles:[
{
role:102
},
{
role:105
}]
}
}]
};
var companies =
{
companies:[
{
text:"Oracle Corporation",
value:"119"
},
{
text:"Symantec Corporation",
value:"120"
},
{
text:"SoftAMIS Corporation",
value:"121"
},
{
text:"Konami Corporation",
value:"122"
},
{
text:"BEA Systems, Inc.",
value:"123"
}]
};
var departments =
{
departments:[
{
text:"Research Department",
value:"101"
},
{
text:"Software Department",
value:"102"
},
{
text:"Management Group",
value:"103"
}]
};
var json2 =
{
employee:
{
names:
{
firstName:"Mickey",
middleInitial:"",
lastName:"Mouse"
}
}
};
var contact =
{
phoneHome:"999-999-99",
beeper:"979",
email1:"[email protected]"
};
|
| Lookup JSON nodes: |
|
Querying for all employees:
|
|
|
|
Querying for all employees with gid=104:
|
|
|
|
Querying for employees with first name starts with "M":
|
|
|
|
Querying for employees whose child of "items" and first name starts with "M":
|
|
|
|
Querying for employees with first name starts with "M" and beeper equals "56":
|
|
|
|
Querying for employee with correct email:
|
|
|
|
Querying for first employee whose first name starts with "M":
|
|
|
|
Obtaining count of employees whose first name starts with "M":
|
|
|
|
Selecting employees which are not superusers
|
|
|
|
Worries about lookup performance?
|
|
|
|
| JSONER basics |
|
Converts an array of JSON objects to Map:
|
|
|
|
Make clone of JSON tree:
|
|
|
|
Clone of array:
|
|
|
|
Clones of map:
|
|
|
|
JSON trees merge:
|
|
|
|
Comparing JSON trees:
|
|
|
|
Comparing JSONs:
|
|
|
|
| Convert JSON tree to XML |
|
Convert to XML with pretty prints:
|
|
|
|
Compact output:
|
|
|
|
Convert to XML with node names and attribute values mapping:
|
|
|
|
Changes JSON attribute rule, outputs XML structure:
|
|
|
|
Expands compainesID and departmentID by map, transforms attributes:
|
|
|
|
| Converting JSON to Path-Value structure |
|
Represents JSON tree as name-value pairs:
|
|
|
|
Changes JSON attribute rule, represents JSON as name-value pairs:
|
|
|
|
| Getting JSON property value |
|
Property access by path:
|
|
|
|
Another path to access property:
|
|
|
|
Getting property value by path. Note: paymentInfo not found until set employee.paymentInfo.number called
|
|
|
|
|
Worries about property access performance?
|
|
|
|
| Assign value to JSON property |
|
Assigning proeprty value by path:
|
|
|
|
Assigning property value, create missing data:
|
|
|
|
Setting property value, create missing data:
|
|
|
|
Setting property value. Note: paymentInfo can't be found until set value is called.
|
|
|
|
Worries about assignment performance?
|
|
|
|
| JSON data binding core |
|
Obtaining array of employee children (alert shows length of array):
|
|
|
|
Getting the first child of the JSON node:
|
|
|
|
Getting array of employee attributes (alert length):
|
|
|
|
Adding child node:
|
|
|
|
Removing children:
|
|
|
|
Removing a child: Note: "contact" node not found until addChild called
|
|
|
|
| Working with HTML form using JSONER |
var jPattern =
{
"employee.gid":
{
div:
{
span:null,
input:
{
"type":"hidden"
}
}
},
"employee.names.firstName":
{
div:
{
input:
{
size:"20"
}
}
},
"employee.names.middleInitial":
{
div:
{
input:
{
size:"5"
}
}
},
"employee.companyID":
{
div:
{
span:
{
text:"Company:"
},
input:null,
"select":
{
"class":"json_input",
option:companies.companies
}
}
},
"employee.job.departmentID":
{
div:
{
span:
{
text:"Department:"
},
input:null,
"select":
{
"class":"json_input",
option:departments.departments
}
}
},
"employee.login.password":
{
div:
{
input:
{
"type":"password", size:"40"
}
}
},
"number":
{
div:
{
input:
{
"type":"text",
size:"6"
}
}
},
"boolean":
{
div:
{
input:
{
"type":"checkbox"
}
}
},
"CDATA":
{
div:
{
input:null,
textarea:
{
"class":"json_input",
rows:"3",
cols:"50"
}
}
},
"default":
{
div:
{
span:
{
"class":"json_label"
},
input:
{
"class":"json_input",
"type":"text",
size:"40"
},
style:"float:left;"
}
}
};
var EOL = {div:{style:"clear:both"}};
|
|
Creating HTML form by JSON model and patterns
|
|
|
|
Checking for changes:
|
|
|
|
Populating HTML form data to JSON:
|
|
|
|
Worries about form processing performance?
|
|
|
|
|
|
