jquery tmplate from a json object

Posted on 2012-09-04
Last Modified: 2012-09-05
thought I should ask. Are there any tools that would create a jquery tmplate from a given json object.

I realize I'll obviously need to customize the look and feel of the template - but having a boilerplate template that would start me off would be a big help.

Question by:sanagarwl
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Not sure what you mean by jQuery templates!

    A json object is a string representation of data!

    Can you explain more about what you mean or what you're trying to achieve

    Author Comment

    by jquery templates I meant

    I realise Json is a string representation. And, I have been using Json with ExtJs as well as JQuery and I have used templates.

    I was just getting a little lazy and was hoping there was  a tool that could take a Json representation and transparently create a tmplate to render html.

    And, I could then customize the tmplate to get the desired result....
    LVL 42

    Assisted Solution

    by:Chris Stanyon
    Right. The plugin you're talking about has never got, nor ever will get past beta. It's been abandoned by the jQuery team, so I wouldn't rely on it too much.

    Sorry. Can't be of any more help
    LVL 16

    Accepted Solution

    Not sure if I'm fully following you, but knockout.js handles converting JSON strings to HTML templates very beautifully.

    In my example below, notice that the "template" is really just plain HTML with a data-bind="foreach: modelData" declaration that tells knockout to do it's magic.

    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Evan Cutler" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <title>Knockout Sample</title>
        <style type="text/css">
            body {font-family:Arial;}
        <script type="text/javascript">
            var sampleJSONData = '[{"color": "Red", "size": "Large"}, {"color": "Blue", "size": "Large"}, {"color": "Pink", "size": "Medium"}]';
            //knockout uses a single object to hold all the model elements
            var pageModel = {};
            var modelData = ko.observableArray($.parseJSON(sampleJSONData));
            $(document).ready(function () {
                //wait until the page loads and apply the binding.
        <h1>Data Template</h1>
            <tbody data-bind="foreach: modelData">
                    <td data-bind="text:color"></td>
                    <td data-bind="text:size"></td>

    Open in new window


    Author Closing Comment

    thanks Guys,

    Sorry I was not clearer, since we are using jquery I'll need to use jQuery tmplates or the newer avatar jsRender. If I continue to use jQuery tmplates, I was looking for a tool that at design time could create a tmplate file on the fly based on a given json.

    I could then customize this given tmplate - apply styles etc.

    Thanks for telling me about knockout - I plan on looking at that as well as backbone.js.
    LVL 16

    Expert Comment

    Both are excellent, well supported, and widely used.  I'm elbow-deep into Knockout, so that's my preference, but I hear really good things about backbone.

    As for styling, yeah, knockout's got that.  ;)

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now