accessing json in jquery template

how can i parse the particular 'li' field from the following using jquery template?

<!DOCTYPE HTML>
 <html> 
      <head>
            <meta charset="utf-8">
    <title>JQTsDocument</title>
    <link rel="stylesheet" href="css/layout1.css"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-template.js"></script>
    <script id="lessons" type="text/x-jquery-tmpl">
        <header>
        <h1>${head1}</h1>
        <img src="${image.source}" />
        <nav>
        <ul>
        <li>
        {{each li}}

        {{/each}}
        </li>
        </ul>
        </nav>
        </header>
    </script>
    <script type="text/javascript">
        var header = [{
            "head1" : "JQT Doc",
            "image" : {
                "source" : "images/logo.png",
                "alternate" : "JQT Doc"
            },
            "nav" : [{
                "ul" : [{
                    "li" : "1st"
                }, {
                    "li" : "2nd"
                }]
            }]
        }];

        $(document).ready(function() {
            $('#lessons').tmpl(header).appendTo('body');
        });

    </script>
</head>
<body></body>

Getting no idea how to parse that "li" using each loop inside the template and if the i want to access the nav elements how can i do that

Solution

I think what you are looking for is this

<script id="lessons" type="text/x-jquery-tmpl">
<header>
<h1>${head1}</h1>
<img src="${image.source}" />
<nav>
<ul>
<li>
{{each nav[0].ul}}
        <div>${li}</div>
{{/each}}
</li>
</ul>
</nav>
</header>
</script>

You can find a working sample here.