Bootstrap Проблема с привязкой к данным

Question

Я создаю таблицу данных, используя существующую таблицу.

вот мой код:

Loaddata: function () {
    var table = $('#main-table');
    var row = "";
    var count = 0;
    $.ajax({
        type: "GET",
        url: apicall,
        beforeSend: CommonJS.BeforeSendAjaxCall,
        processdata: OPVConfig.ProcessData,
        contentType: "application/json; charset=utf-8",

        success: function (data) { //getting object array
            if (data !== null) {

                $.each(data.Data, function (key, val) {      //creating table from api responce
                    row = "<tr class=clickable - row data-href='/'" +
                        "<td scope=row>" + CommonJS.checkNull(val.containercode) + "</td>" +
                        "<td>" + val.Streetname + val.Housenumber + val.city + "</td> " +
                        "<td>" + CommonJS.checkNull(val.Zipcode) + "</td> " +

                        "<tr>";
                    $("#main-table").append(row); //append the row 
                });

                $("#main-table").dataTable();

            }
        },
        error: function (xhr, status, error) {
           //do error stuff here
        },
        complete: function () {

             //do complete stuff here


        }
    });
}

Выборка данных и заполнение табличных данных работают правильно, но данные не работают, я получил ошибку в консоли:

"Uncaught TypeError: Невозможно прочитать свойство 'length' с неопределенным значением"