Populating a template with data pulled using an ajax call

[Juan]

hi there,

I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.

here is my view

<div id="computerTab" class="container">
    <div id="computerDetailsSection"></div>    
</div>

<script type="text/x-kendo-template" id="myTemplate">
    <div>
        <!-- Loop for sections -->
        <dl>
        #for (var i=0,len=Sections.length; i<len; i++){#
            #if(Sections[i].Fields.length>0)#
            #{#
                <dt>${ Sections[i].Title }</dt>
                <!-- Loop for fields -->
                #for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
                    <dd>${ Sections[i].Fields[j].Name }</dd>
                #}#
            #}#
        # } #
    </dl>
 
    </div>
</script>

here is my script

<script>
    function getComputerData() {
        var result;
        $.ajax({
            url: 'myurl',
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                console.log('success');
                result = data;
            },
            error: function () {
                console.log('Error');
            }
        });
        return result;
    }

    var ajaxData = getComputerData();
    var scriptTemplate = kendo.template($("#myTemplate").html());
    $("#computerDetailsSection").html(scriptTemplate(ajaxData));

here is a sample of the data that i get from my ajax call
Sections: [
             { Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
             {
                 Fields: [
                        { Order: 1, Name: "Company-owned Location", Value: null },
                        { Order: 2, Name: "Country", Value: null },
                        { Order: 3, Name: "State", Value: null },
                        { Order: 4, Name: "Site", Value: null },
                        { Order: 5, Name: "Address Line 1", Value: null },
                        { Order: 6, Name: "Address Line 2", Value: null },
                        { Order: 7, Name: "Building", Value: null },
                        { Order: 8, Name: "Floor", Value: null },
                        { Order: 9, Name: "City", Value: null },
                        { Order: 10, Name: "Zip", Value: null },
                        { Order: 11, Name: "Room", Value: null },
                        { Order: 12, Name: "Where can you be found?", Value: null }
                 ],
                 Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
             }]
but when i run this in my browser i always get this exception JavaScript runtime error: Object expected

what am i doing wrong?

thanks!

[Petyo]

Hello Juan,

Fetching data with ajax is asynchronous - the result returned from getComputerData is undefined. You should bind the data in the success event handler. 

Regards,
Petyo
Telerik

[Juan]

thanks Petyo! it did the trick!