Home/ Questions/Q 7621525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:13:01+00:00

I have an object with has multiple similar complex properties. I would like to

  • 0

I have an object with has multiple similar complex properties. I would like to write a generic template that could be used for each property but am unsure how to proceed. My object looks similar to the below json representation. if the appointments / days were a collection, then I could iterate the collection binding a template normally. However, I need to model each ‘day’ as a property – for example, there will always be 5 entries.

However, I suppose the question is can you reuse the same template for each day. In effect, iterating each property using reflection?

{
  "days" : {
    "monday" : {
      "salesman" : "john",
      "customer" : "fred"
    },
    "friday" : {
      "salesman" : "paul",
      "customer" : "keith"
    },
    "tuesday" : {
      "salesman" : "dave",
      "customer" : "graham"
    },
    "wednesday" : {
      "salesman" : "james",
      "customer" : "keith"
    },
    "thursday" : {
      "salesman" : "keith",
      "customer" : "donald"
    }
  }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you can change the format to something like this that would make it a lot easier because you can just use an iterator over days, and interpolate using known keys.

    { days: [{"weekday":"monday", "salesman":"john", "customer":"fred"}, ...]}

    However, using the existing format you can solve this in Handlebars.js like this (should probably work in Mustache.js as well, but I haven’t tried that):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript"
            src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
</head>
<body>
<div id="output">
</div>
<script id="tmpl" type="x-template">
    <table>
    {{#key_value days}}
        <tr>
            <td><strong>{{key}}</strong></td>
            <td>{{value.salesman}}</td>
            <td>{{value.customer}}</td>
        </tr>
    {{/key_value}}
    </table>
</script>
<script type="text/javascript">
    var data = {
        "days":{
            "monday":{
                "salesman":"john",
                "customer":"fred"
            },
            "friday":{
                "salesman":"paul",
                "customer":"keith"
            },
            "tuesday":{
                "salesman":"dave",
                "customer":"graham"
            },
            "wednesday":{
                "salesman":"james",
                "customer":"keith"
            },
            "thursday":{
                "salesman":"keith",
                "customer":"donald"
            }
        }
    };

    Handlebars.registerHelper("key_value", function (obj, fn) {
        var soFar = "";
        var key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) {
                soFar += fn({key:key, value:obj[key]});
            }
        }
        return soFar;
    });

    var templateSrc = $("#tmpl").html();
    var template = Handlebars.compile(templateSrc);
    var result = template(data);

    $("#output").html(result);
</script>
</body>
</html>
    • 0