darkhand3001:json2html

A Meteor Wrapper for json2html


Install
meteor add darkhand3001:json2html@=0.0.9

Documentation

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.