Question

This is my template;

<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
        {{ for BusinessUnitName }}
            <li>{{:#data}}</li>
        {{/for }}
    </script>

This is where I send the data;

RenderDepartments = function (data) {
            $('#departmentList').empty();
            $('#departmentList').html($('#DepartmentTemplate').render($.parseJSON(data)));
        };

And this is where I put the data;

<ul id="departmentList"><%: Html.DisplayFor(model => model.AdditionalDepartmentList) %></ul>

This is the data received into the function data parameter;

{\"BusinessUnitName\":[\"Design and Build (Technical)\",\"Architectual Design\",\"ICT\",\"Mechanical & Electrical \",\"Safety Management\"]}

I do not know if I need to use the jquery $.parseJson, but either way the data does not render properly.
With $.parseJson it renders as;

{{ for BusinessUnitName }} 
•[object Object]
 {{/for }} 

Without it renders as

{{ for BusinessUnitName }} 
•{"BusinessUnitName":["Architectual Design","ICT","Mechanical & Electrical ","Safety Management","Marketing"]}
 {{/for }} 

So on the screen I am seeing some of the template definition, rather than a list.
How do I fix this?

Answer 1

The problem was in whitespaces, after removing them, code works as expected:

<script id="DepartmentTemplate" type="text/x-jquery-tmpl">
    {{for BusinessUnitName}}
         <li>{{:#data}}</li>
    {{/for}}
</script>