How to use microtemplate

Question

For some reason, I can't get the John Resig micro template to work. I've read here, and can get this example to work, but it is for a very simple object.(ie. var data = { fname : "fred" };), however, when I try to use my more complicated object

{"order":{"name":"TRADEMARK WHEEL COMPANY","sales_order_id":"18278","order_date":"05 \u2044 15 \u2044 2012","due_date":"05 \u2044 21 \u2044 2012","order_number":"1213140","reference":"21192D\/35546","order_description":"BICICLETTE","ship_name":"ADAMS","ship_address1":"1919 W RANDOLPH ST.","ship_address2":"","ship_city":"CHICAGO","ship_state":"IL","ship_postal_code":"60606","ship_country":null,"ship_via":"FEDEX GROUND","tracking_number":null,"package_contents":null,"freight":"0.00","taxable":"0.00","nontaxable":"748.88","sales_tax":"0.00"},"line_item":[{"description":"RED ONE","quantity":"2.00","sell_price":"349.44"},{"description":"FRONT GEAR","quantity":"2.00","sell_price":"15.00"},{"description":"5th GEAR","quantity":"2.00","sell_price":"10.00"}]}

and try to access it like so

<script>
(function () {

  var submitStr="test string of data";

  $.ajax({
    type: "POST",
    url: "getJSON.php",
    data: submitStr,
    success: function (data) {
    console.log(data);
    var generatedText = tmpl("order_detail", data);
    var elem = document.getElementById("elemId");
    elem.innerHTML = generatedText;
    }
    });

}());
</script>
<script id="order_detail" type="text/html">
        <div>
Name:<%=data.order.name%> ID:<%=data.order.sales_order_id%><hr/>

<%for(var i=0;i<data.line_item.length;i++) {%>

      description: <%= data.line_item[i].description %><br/>
      quantity: <%= data.line_item[i].quantity %><br/>
      price: <%= data.line_item[i].sell_price %><hr/>


<%}%>
</div> 

 </script>

I get the error that data is undefined. I've tried it without data., simply trying to access the object's values directly, but that doesn't work either.

I'm grateful for any help using this thing!

what do you get with `console.log(data);` – wong2 May 23 '12 at 16:26 — wong2, May 23 '12 at 16:26
i get the object printed out like a json string. – 1252748 May 23 '12 at 17:19 — 1252748, May 23 '12 at 17:19

wong2 · Accepted Answer · 2012-05-23T17:45:25.677

1

1.In $.ajax success callback success: function (data) you get the data as a JSON string, you have to parse it to an object before pass it to the tmpl function.

$.ajax({
    type: "POST",
    url: "getJSON.php",
    data: submitStr,
    success: function (data) {
        console.log(data);

        data = JSON.parse(data);

        var generatedText = tmpl("order_detail", data);
        var elem = document.getElementById("elemId");
        elem.innerHTML = generatedText;
    }
});

2.remove all the data prefix in your template.

edited May 23 '12 at 17:45

answered May 23 '12 at 17:34

wong2

34,358
48
134
179

`console.log(data) //{"order":{"name":"TRADEMARK WHEEL COMPANY","sales_order_id":"18278","order_date":"05 \u2044 15 \u2044 2012","due_date":"05 \u2044 21 \u2044 2012","order_number":"1213140","reference":"21192D\/35546","order_description":"BICICLETTE","ship_name":"ADAMS","ship_address1":"1919 W RANDOLPH ST.","ship_address2":"","ship_city":"CHICAGO","ship_state":"IL","ship_postal_code":"60606","ship_country":null,"ship_via":"FEDEX` – 1252748 May 23 '12 at 17:45
`GROUND","tracking_number":null,"package_contents":null,"freight":"0.00","taxable":"0.00","nontaxable":"748.88","sales_tax":"0.00"},"line_item":[{"description":"RED ONE","quantity":"2.00","sell_price":"349.44"},{"description":"FRONT GEAR","quantity":"2.00","sell_price":"15.00"},{"description":"5th GEAR","quantity":"2.00","sell_price":"10.00"}]}` and the error is still there `Uncaught ReferenceError: data is not defined` – 1252748 May 23 '12 at 17:45
@thomas that's what Chrome would log when `data` is a string, if it's an object, chrome would display `Object` with an arrow. I've updated my answer for the second point. – wong2 May 23 '12 at 17:47
using [this function] (http://stackoverflow.com/a/3826081) `console.log(data)` gives me [object Object] – 1252748 May 23 '12 at 17:54
Works perfectly. Thanks you so much. I honestly had tried parsing with jquery parsejson, but must've erred somewhere critical. You saved my head many concussions and my desk many dents. Thank you so much!! – 1252748 May 23 '12 at 17:57

How to use microtemplate

1 Answers1