Error when laoding datatable from JSON

I'm developing a project where I fill an HTML table using datatables and a JSON returned from my server, which originally is a list of a class.

The code is the following one for each element:

Table HTML:

<table id="tablaDetalle2" class="display" role="grid" aria-describedby="example2_info">
    <thead>
        <tr>
            <th>id</th>
            <th>idFlight</th>
            <th>idSample</th>
            <th>import</th>
        </tr>
    </thead>
    <tbody>
</table>

Javascript:

$('#tablaDetalle2').DataTable({
    "bProcessing": true,
    "sAjaxSource": "@Url.Action("Detalle","Muestra", new {idExp = 1, descrExp="abc"})"
});

ServerCode:

public ActionResult Detalle(int idExp, string descrExp)
{
    List<Models.Muestra_Detalle> aaData = new List<Models.Muestra_Detalle>(); //Returns a list of the data
    aaData = Manager.MuestraManager.Cargar_Detalle(idExp);
    var jsonSerializer = new JavaScriptSerializer();
    var JsonFinal = jsonSerializer.Serialize(aaData);

    try
    {
        return Json(new { JsonFinal }, JsonRequestBehavior.AllowGet);

    }
    catch (Exception ex)
    { return null; }
}

The object JsonFinal returned has the following structure:

[{"id":"1","idFlight":1,"idSample":3217.5,"import":0}]

But I get the following error:

Unhandled exception at line 188, column 47 in 
http://localhost:61298/Content/DataTables/jquery.dataTables.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'length' of undefined or null reference

For instance, if I declare a hardcoded variable:

var data = new[] { "id:A", "idFlight:B", "idSample:C", "import:D" };

No error shows up, even though the content defined in the variable data and how it's shown in the table doesn't match.

I've tried so many ways to do it, some says it's just no data to show in the table, this seems the best possible approach once the issue is solved.

The biggest difference when hardcoding a the variable returned to the datatables is that the variable data is an object with 4 different strings, and the result of using JsonSerializer It's just like one string, I don't really know.

ÛPDATE

Renamed the JsonFinal to aaData, some error different pops ups, will try what some of you said and report back with more details.

New code from the server:

public ActionResult Detalle(int idExp, string descrExp)
    {
        ViewBag.Exp = descrExp;
        List<Models.Muestra_Detalle> azaData = new List<Models.Muestra_Detalle>();
        aaData = Manager.MuestraManager.Cargar_Detalle(idExp);
        var jsonSerializer = new JavaScriptSerializer();
        var aaData = jsonSerializer.Serialize(azaData);
        //string data2 = JsonFinal.Replace("\\", "");

            //var data = new[] { "id:A", "idgasto:B", "ImpGasto:C", "idMuestra:D" };
            return Json(new { aaData }, JsonRequestBehavior.AllowGet);


    }

New error : DataTables warning: table id=tablaDetalle2 - Requested unknown paramter 'id' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4.

Already went over there, couldnt get anything out.

It's like it can't find the column id in the returned JSON as it becomes null in the table.

Try returning your json object directly without using serializer. For example

public ActionResult Detalle(int idExp, string descrExp)
{
    List<Models.Muestra_Detalle> aaData = new List<Models.Muestra_Detalle>(); //Returns a list of the data
    aaData = Manager.MuestraManager.Cargar_Detalle(idExp);

    try
    {
        return Json(aaData , JsonRequestBehavior.AllowGet);

    }
    catch (Exception ex)
    { return null; }
}