meteor-json2html
What is meteor-json2html?
meteor-json2html is a Meteor wrapper for the HTML templating engine json2html.
Why?
Debugging. Since Meteor has its own powerfull templating engine, meteor-json2html is mainly usable for easy monitoring changes to any (JSON) reactive data without stepping through the debugger.
NOTE: It's also available on the server, though not much useful at the moment except for rendering JSON in emails or such.
OK, so what is json2html?
json2html is a javascript HTML templating engine which converts json object to html using json transforms.
Note that this meteor-json2html package includes the latest version of json2html core.
Installation
meteor add miro:meteor-json2html
Example
<body>
<div class="debug">{{> players}}</div>
</body>
<template name="players">
<pre class="players">{{json2html players}}</pre>
</template>
Template.players.helpers({
players: function () {
return Players.find().fetch();
}
});
Will produce something similar to:
[
{
"_id": "kqubNgSkH8WfH5cRg",
"name": "Ada Lovelace",
"score": 20
},
{
"_id": "wiYXcoGi2oBfrQB3C",
"name": "Grace Hopper",
"score": 20
},
{
"_id": "9WLkp5TGMdRfuxFLy",
"name": "Marie Curie",
"score": 25
},
{
"_id": "KTXA3rkbA6byjntCb",
"name": "Carl Friedrich Gauss",
"score": 20
},
{
"_id": "5Ji5q4CwTtiZDyiWP",
"name": "Nikola Tesla",
"score": 170
},
{
"_id": "QHtu2LC6Zctoyr87e",
"name": "Claude Shannon",
"score": 110
}
]
NOTE: If provided with reactive source, it will re-render on each change
You can even color the syntax with your own style (if enabled), for example:
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
to get something like this (markdown doesn't do it justice):
[
{
"_id": "kqubNgSkH8WfH5cRg",
"name": "Ada Lovelace",
"score": 20
},
{
"_id": "wiYXcoGi2oBfrQB3C",
"name": "Grace Hopper",
"score": 20
},
{
"_id": "9WLkp5TGMdRfuxFLy",
"name": "Marie Curie",
"score": 25
},
{
"_id": "KTXA3rkbA6byjntCb",
"name": "Carl Friedrich Gauss",
"score": 20
},
{
"_id": "5Ji5q4CwTtiZDyiWP",
"name": "Nikola Tesla",
"score": 170
},
{
"_id": "QHtu2LC6Zctoyr87e",
"name": "Claude Shannon",
"score": 110
}
]
Usage
meteor-json2html comes with predefined global template helper {{json2html <param>}}
which you can use in your templates like in previous example.
It takes one parameter - a JSON object to render.
However, should you want to use it in some other way, here are the specs:
json2html.transform( json, [transform], [options] )
Main call to the meteor-json2html engine, with:
-
json
- object (or array) of JSON object(s) to transform -
transform
- (optional) object (or array) of JSON transform object(s)If transform parameter is not supplied, meteor-json2html will render its own version, with color syntax (if enabled).
options
- (optional) an options object
Please, see json2html for more info.
json2html.config( options )
Options for meteor-json2html can be set globally so you don't have to provide them on each call.
It accepts an object with parameters:
-
colorSyntax
- should the color syntax be used? -
indent
- indentation level (# of spaces)
For example:
json2html.config(
colorSyntax: true, // default
indent : 2 // default
);
Version Info
v1.0.3
- version bump
v1.0.2
- more README.md update
v1.0.1
- set Meteor version constraint to more general v1.0
- README.md update
v1.0.0
- Initial version
Copyright and license
Copyright © 2015 Miroslav Hibler
miro:json2html is licensed under the MIT license.