JSrender not showing data for nested objects

See more:

Javascript

HTML

jQuery

JSON

, +

Well i have the data returned from PHP which i then parse it. Data shows up for the attribute called empName but not for the nested ones. What is wrong that i need to correct in my javascript code. Heres the JSON string which returns from PHP (the output of variable called info):

[{"empName":"Sam","skillDetails":[{"skill":"Javascript","level":"Intermediate"}]}]

And here' s the template (The data does not show for skill and level)

<script id="tmplEmpDetails" type="text/x-jsrender">
{{if data.length > 0}}
{{for data}}
<tr>
    <td class="tg-spn1">{{:#view.data.empName}}</td>
    <td class="tg-spn1">{{:#view.data.skillDetails.skill}}</td>
    <td class="tg-spn1  ">{{:#view.data.skillDetails.level}}</td>
</tr>
{{/for}}    
{{/if}}
</script>

The Javascript:

        $.post( "indexBase.php",
        $('#str').val(JSON.stringify(empObj)),                               
        function(info){                             
            var result = JSON.parse(info);                                                              
            $( "#tblEmpDetails tr[id!='hdrEmpDetails']" ).empty();
            $("#tblEmpDetails").append($("#tmplEmpDetails").render({
                    data : result
                }));                
        }); 

    $("#mainForm").submit( function() {                         
        return false;   
    }); 

    $('.trSkillCls').not(':first').remove();
}); 

And finally the HTML (Sure i need to correct my HTML too)

<table class="tg" width="100%" id="tblEmpDetails">
<tr id="hdrEmpDetails">
    <th class="tg-s6z2" >Employee</th>
    <th class="tg-s6z2" >Skill</th>
    <th class="tg-s6z2" >Level</th>
</tr>
</table>

Does that mean i have to for loop twice in my template?