parsejson rendering through template in javascript - jsonp

Question

I have parseJson object as follows...
parseJSON([
{"BOOK_Name":"AAA”,"quickRead":[{"Page_Heading":"AAA-heading","Page_Url":"http://rtrt.com"},{"Page_Heading":"AAA-heading2","Page_Url":"http://bghfhghf.com"}]},
{"BOOK_Name":"BBB","quickRead":[{"Page_Heading":"BBB-heading","Page_Url":"http://dsdfdf.com"},{"Page_Heading":"BBB-heading2","Page_Url":"http://rtrtdfdf.com"}]}
]}
I am able to render this partially in tbody element using javascript jsrender as follows.... i.e able to render book_name but not quickread ... so how can I render data within quickread inside say element?
$('tbody', '#bookTemplateTable').html($('#bookTemplate').render(data));
template for the same is as follows:
<script id="bookTemplate" type="text/html">
<tr>
<td>{{=BOOK_Name}}</td>
<td>
<ul>
<li> .. render 1st quickread value .. </li>
<li> .. render 1st quickread value .. </li>
</ul>
</td>
</tr>
</script>
can anyone help on this?

Answer 1

It would be best for you to take a look at jsrender demo page. There you can learn how to use template tags.
First, you should use
{{>propertyName}}
{{:propertyName}}
to display data. See this demo for explanation on when to use what.
For your particular case, here is the valid template:
<script id="bookTemplate" type="text/html">
<tr>
<td>{{>BOOK_Name}}</td>
<td>
<ul>
{{for quickRead}}
<li>{{>#data.Page_Heading}}</li>
{{/for}}
</ul>
</td>
</tr>
</script>
Working example can be found here:
http://jsfiddle.net/EGFbq/