jQuery template/tmpl how to build dynamic output from json?

Question

Trying to build dynamic output from json and using jq/template tmpl display rows/columns. Somehow i need to iterate thru columns and Rows not sure how.

I do NOT KNOW name of json properties, so it needs to be dynamic.

Finally got an answer Here

<script id="template" type="text/x-jquery-tmpl">
        <li>{Need Loop here?}</li>           
 </script>

var invoice = {
  invoiceItems: [
    { type: 'item', 
      part: '99Designs', description: '99 Designs Logo', 
      price: 450.00, qty: 1 },
    { type: 'service',
      service: 'Web development and testing', 
      price: 25000.00 },
    { type: 'item',
      part: 'LinodeMonthly', description: 'Monthly site hosting', 
      price: 40.00, qty: 12 }
  ]
};

$("#template")
    .tmpl(invoice.invoiceItems)
    .appendTo("#place_holder");

Also, is any way to display json property name? Like:

type > part > description> .....

Here's jsFiddle

Update:

I start using Jsrender, much faster. I still haven't figure out how to create dynamic templates. Will update if get completed.

pyccki pyccki · Accepted Answer · 2012-01-25T16:57:33

Finally got a help from Friend of mine.

Template

<script id="template" type="text/x-jquery-tmpl">
{{each(i, invoiceItem) invoiceItems}}
    <li>
    {{each(j, property) $item.getProperties(invoiceItem) }}
       ${invoiceItem[property]} >>
    {{/each}}
    </li>
{{/each}}
</script>

Helper function

var functionHelpers = {
getProperties: function(invoiceItem) {
    var properties = [];

    for(var key in invoiceItem) {
        properties.push(key);
    }

    return properties;
}

};

Here's working example jsFiddle

jQuery template/tmpl how to build dynamic output from json?

4 Answers