Jquery templates - nested JSON

Question

I need to display progress card of a student in my app I'm using jquery templates and I'm facing a problem I've a json string like given below

"[{"ID":1,
"Name":"Frank",
"Age":15,
"Status":"Pass",
"MarkList":[{"year":"11/28/2012","Status":"Pass","Mark":"100"},
{"year":"2011","Status":"Pass","Mark":"110"},
{"year":"2010","Status":"Pass","Mark":"120"},
{"year":"2009","Status":"Pass","Mark":"130"}]
}]"

I tried the following code

{{each(i,item) $data}}
{{each(j,subItem) $item}}
<div>${year}</div>
<div>${Status}</div>
<div>${Mark}</div>
{{/each}}
{{/each}}

but the page not loading I know my code is not correct but I dont know how to correct that... any thoughts????

Answer 1

To loop through the items and then the list of marks, you would likely want something like:

{{each(i, person) $data}}
<div>${Name}</div>
<ul>
   {{each(j, list) MarkList}}
    <li>${year}</li>    
    {{/each}}
</ul>
{{/each}}

Sample: http://jsfiddle.net/K8rsR/