As part of my co-op term here at TWG, I’ve had the opportunity to try out new technology, approach interesting technical problems, and develop useful bits of code outside of client work. JSONimal was created on one of my ‘lab days’ focused on innovation and experimentation.

The purpose of JSONimal is to take the pain out of constructing HTML using Javascript.

What’s it do? This example should demonstrate my goal fairly well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function() {

    $.mktag("#demo").jsonimal([

        ["h1", {text: "JSONimal!"}],

        ["table",{style: 'border: 1px solid black'},[

            ["thead",[

                ["tr",{style: 'text-transform: uppercase'},[

                    ["th", {text: "one"}],

                    ["th", {text: "two"}],

                    ["th", {text: "three"}]

                ]]

            ]],

            ["tbody", [

                ["tr",[

                    ["td", {html: "<u>a</u>"}],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]],

                ["tr",[

                    ["td",[

                        ["a", {href: "http://www.google.ca", text: "Google"}]

                    ]],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]],

                ["tr",[

                    ["td", {text: "a"}],

                    ["td", {text: "b"}],

                    ["td", {text: "c"}]

                ]]

            ]]

        ]]

    ]).appendTo("body");

});

Which will add this to the body:

JSONimal!

For more information and examples, check out the github page: JSONimal @ github.

I also posted it as on the jQuery plugins page – but that just points to the github page anyway. JSONimal @ plugins.jquery.com