server side processing, bind to json array of objects

vlscanner

Hi,
looking for help binding json object array coming from server side, after executing this I get empty table ("No data available in table" message) and total and filtered in footer are 0.

this is json coming from server side, "var json" declaration here is only to show array structure, there is no such declaration in real code.

var json = {
    "draw": 1,
    "recordsTotal": 4,
    "recordsFiltered": 4,
    "Visits":
        [
            { "Name": "Joe Doe", "Email": "joe@gmail.com", "Phone": "1-800-JOE-DOE"},
            { "Name": "Jane Doe", "Email": "jane@gmail.com", "Phone": "1-800-JANE-DOE" }
        ]
  
}

this is binding script, just one of the failed versions, so I know it is wrong but picked is the only version where I dont get any js errors in console, just empty table. I tried all possible ways I can think of to tell datatable where in the array the data is. I am using dataSrc because I would need to pre-process json result at some point.

 var table= $('#' + "tableVisits");
      
           
            table.dataTable({
                processing: true,
                serverSide: true,
                bRetrieve: true,

                ajax: {
                    url: "/admin/visits/list",
                    type: "POST",
                    dataSrc: function (json) {return json; }
                },
                columns: [
                    { data: "Visits.Name"},
                    { data: "Visits.Email"},
                    { data: "Visits.Phone"}
                ]

            });

and this is html

<table id="tableVisits">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </tfoot>

</table>