JSONTables: JSON DB as editable HTML tables
Recently while working on a client side project, I felthought that it would be cool if we could have a tool to quickly convert a JSON database into a nice HTML table where any changes made to the table would be replicated back to the database. Googling gave me some stuff though nothing that could catch my fancy. So I decided to write some code for it.
You can check a working example here. One important thing to be remembered is that this code will not go on looking for tables. It will just show what you want it to show. So consider the following JSON:
{
fighter" : [
{"name": "Sonya", "species": "Human", "Age": "26"},
{"name": "Kitana", "species": "Edenian", "Age": {"real": "10000", "apparent": "25"}},
{"name": "Tanya", "species": "Edenian", "Age": {"real": "10000", "apparent": "oh well"}},
{"name": "Kira", "species": "Human", "Age": "29"}
],
"match" : [
{"id": "001", "place": "xyz"},
{"id": "002", "place": "abc"}
]
}
The object says it all (including my obsession towards MK chicks :P). There are two tables namely "fighter" and "match". So this is the result that you will get:
You can download the code from link below. Put it in your file, and call it this way. `root` is where tables will appear and `src` is from where I'll pick up the object.
JSONTab({
root: "show",
width: "300px",
src: "txt",
bgcolor: "Gray",
color: "White"
});
Download the library (minified) (right click + save)
JavaScript, JSONTags JavaScript JSON