Manipulating JSON With HTML & CSS LoveTech Plugins

JSON Manipulation for Web Developers

Best Practices for Managing JSON in Realtime on the Front End

JavaScript objects and arrays of objects are extremely important in web applications because JavaScript is the only language that runs natively in all browsers.

HTML and CSS are the world’s standards for page structure markups and styling and it is absolutely paramount that web developers be able to manipulate JavaScript Objects and Arrays of Objects within their beautiful user interfaces using a combination of these technologies. LoveTech strives to reduce development time required for elegant web solutions by providing easy binding libraries to bridge between JavaScript data(Objects or an Array of Objects) and user interface(HTML/ CSS) without all the hard to maintain boilerplate code.

LoveTech found ourselves writing a lot of custom, boilerplate data/interface binding code. We knew that by wrapping everything we've learned into an easy-to-use plugin, we could streamline our future efforts and help other web developers in the process.

Let us first define and distinguish our two main plugins for manipulating JSON with HTML and CSS: ObjectEditAdaptor and ArrayTableView

We've generalized two common use cases to allow developers to mix-and match as appropriate and useful. The easiest way to define and differentiate the two LoveTech plugins is that ObjectEditAdaptor binds a JavaScript Object's properties to input fields and display page elements while ArrayTableView manages a list of similar Objects that allows the end user to edit any of the items, add a new item, remove an item, and reorder the items.

Objects

An Object is a singular item that has multiple properties. Some properties may be numbers, others ints, others text strings, others booleans, and others references by ids to other objects.

{ "id":"george", "age":21, "fName":"George", "lName":"Harrison", "bandId":"beatles_band_id" }

LoveTech is quite proud of our ObjectEditAdaptor library that enables developers everywhere to bind object properties to HTML fields in an easy & unobtrusive fashion.

Arrays of Objects

An Array is a group of similar Objects. Arrays of Objects can be either associative or flat. Associative arrays are simply Objects where the properties are a unique idetifier associated with the record (usually the id) and the value is the complete object corresponding to the id. In JSON notation, an associative array of object might look like this:

{
	"john": {"id":"john", "age":21, "fName":"John", "lName":"Lennon" },
	"ringo": { "id":"ringo", "age":21, "fName":"Ringo", "lName":"Starr" },
	"paul": { "id":"paul", "age":21, "fName":"Paul", "lName":"McCartney" },
	"george": { "id":"george", "age":21, "fName":"George", "lName":"Harrison" }
}

A flat array is not "keyed" by id and instead is a JavaScript Array where each element is an object: e.g.

[
	{"id":"john", "age":21, "fName":"John", "lName":"Lennon" },
	{ "id":"ringo", "age":21, "fName":"Ringo", "lName":"Starr" },
	{ "id":"paul", "age":21, "fName":"Paul", "lName":"McCartney" },
	{ "id":"george", "age":21, "fName":"George", "lName":"Harrison" }
]

Arrays of Objects are handled well by LoveTech’s ArrayTableView jQuery Plugin. Make sure to read about the "associative" and "associativeSort" options if your array is associative.


Explore ArrayTableView