Avoid using JSON Data Island and use Data Parachute instead or Html Data
Posted on: 2015-07-14
JSON Data Island is born from the Xml Data Island. It was a way to drop client side information from the server into Html in the page. You could, before Internet Explorer 10, drop a XML tag directly into the Html or having this one between a script tag. Later, with JavaScript or VbScript you were able to go read the information of those islands by accessing the desired information with a unique identifier to the element, often an id.
Finally, we got rid of those data island. What was the problem? First, at the end, website had a lot of these island because it was easy to drop them everywhere. Second, the information is not tight to anything, it is just a bunch of information in a formatted structure but still not related to any JavaScript objects or Html elements. Third, the problem is also how to read that Xml. JavaScript is more suited to access JSON.
However, some people thought that we could replace Xml Data Island with Json Data. The principle is the same, you create from your server side inside a Script tag your JSON. Here is an example:
<script id="my-island"> { prop1:'value1' , prop2:'value2' } </div>
The problem is to read that you need to use Eval.
var jsonIsland = document.getElementById('my-island').firstChild; var information = eval('(' + jsonIsland.data + ')');
I am not a big fan of evaluating on the fly information form the Html. I also think this is not required because we have more natural solution that does not require to use eval. This is what I call "Data Parachute".
The concept of Data Parachute is almost the same but instead of creating an island of data, you drop calmly a Json object into a structure of your application.
<script> windows.application.variables = { prop1:'value1' , prop2:'value2' }; </script>
No need to eval, you can access the windows.application variable from your JavaScript files. The structure is created on the master page (layout) so you can have the variables object created and later in the process to create the page fill up with your variable. Usually, I have also under the application object an object called "localizedstring" which allow me to add string localized in the language of the user. This solution is cleaner than that Json Data Island and remains similar so it is easy to change a current Json Data Island into a Data Parachute one.
An other alternative, if possible, is to use the Html5 data attribute. So instead of adding information into a global variable or in a floating script in your Html, you attach the information directly into the Html element that need the information. This is a good approach but is limited.
<div id="abc" data-prop1="value1"></div>
The problem is that if you wanted to pass from the resource file of the server an error string that is displayed only during an Ajax call than you need to have that error inside an html's data attribute of the element in error. This can result to some duplication if the same error is shown on every of your controls.
At the end, you shouldn't have to use XML Data Island or Json Data Island. Use directly JavaScript variables by setting these one into a Script tag from the server, or use the Html5 data attribute to enhance your Html's controls to have additional information that with JavaScript you will manipulate.