Embed Code

Embed code is generated automatically for every dataset you create. It uses javascript's <script> tags so that it can be embedded in your site just like a YouTube™ video.

<script type="text/javascript" src="http://www.jsondata.com/js/embed.js"></script>
<script type="text/javascript">
  jsonData.init("{datasetID}",
  	function(data){
	  /*bootstrap*/
	},
	function(data){
	  /*realtime*/
	}
  );
</script>

The embed code loads data asynchronously so it can either be placed in the <head> or <body> tag in your html document.

jsonData.init() is a global function that retrieves your data from jsondata.com cloud storage. It accepts three formal parameters:

jsonData.init(datasetID, bootstrap, realtime);
Param Description
datasetID

String — Your dataset's unique identifier.

When we generate your embed code, datasetID is replaced with a string that looks like this: "8f7c3362cfaf9867fdf482f215a86eba". This is the universal unique identifier of your dataset. It indicates which dataset to load.

bootstrap

Function — Callback function that retrieves your entire dataset directly from jsondata.com.

The data is passed to the function's data parameter in a JSON object. It is called only once after jsonData.init() is called.

jsonData.init("8f7c3362cfaf9867fdf482f215a86eba",

  /*bootstrap function*/
  function(data){ /*called only once*/
    console.log(data);
  },
  
  /*realtime function*/
  function(data){}

);

Using console.log(data) results in the following:

{
  "f486762cfd2ba8f7f215a86ec33faf98" : {
  	"Name" : "Alan",
  	"Age" : 42,
  	"Color" : "orange"
  },
  "215affa8fd2b79f86ecf833486762cfa" : {
  	"Name" : "Jennifer",
  	"Age" : 37,
  	"Color" : "blue"
  },
  ...
}

Each record in your dataset is translated into a JSON object where fields are outputted as JSON properties. Ex: "Name" : "Alan". Each record has a unique identifier for a key: "f486762cfd2ba8f7f215a86ec33faf98". This unique id is very useful when needing to access a record when an update comes in from the realtime stream.

When the boostrap() completes, the passed data object can be manipulated in any way you like. Many visualization libraries have unique formating requirements for JSON data; the most common are: associate arrays with properties (the default, as seen above), column arrays, and row arrays.

realtime

Function — Callback function that retreives realtime changes to your dataset.

When the jsonData.init() is first called, it establishes a realtime stream to your jsondata.com dataset. This stream recognizes when changes to your dataset take place and automatically calls the realtime() function. The realtime stream will track the creation, edit and deletion of records. The affected record is and passed in the data object.

jsonData.init("8f7c3362cfaf9867fdf482f215a86eba",

  /*bootstrap function*/
  function(data){},
  
  /*realtime function*/
  function(data){ /*called whenever a record changes*/
    console.log(data);
  }
  
);

Using console.log(data) results in the following:

{
  "f486762cfd2ba8f7f215a86ec33faf98" : {
  	"Name" : "Alan",
  	"Age" : 42,
  	"Color" : "yellow" /*color changed to yellow */
  	"_" : "edit"
  }
}

Record status codes are indicated in the "_" property.

create Indicates a new record has been created.
edit Indicates an existing record has been edited.
delete Indicates an existed record has been deleted.

API

Coming Soon!

What's Next

We're working passionately to bring you new features that will make jsondata.com even easier to use. In upcoming releases we'll improve our user interface, expose the API, add more robust data import features, and add an embedable forms feature for data collection.

Have a great new feature in mind? Let us know through feedback & support button.

Sign up, it's free.

Find out for yourself how simple it is to manage your data in the cloud and stream it to any website, anywhere.