DataTables warning: table id=example - Invalid JSON response while pagination from server - ajax

Question

this is my table
<table id="example" class="display" style="width: 100%">
<thead>
<tr>
<th>latitude</th>
<th>longitude</th>
</tr>
</thead>
<tfoot>
<tr>
<th>latitude</th>
<th>longitude</th>
</tr>
</tfoot>
</table>
this is my script
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$(document).ready(function () {
$('#example').DataTable({
"processing": true,
"serverSide": true,
"info": true,
"stateSave": true,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
"ajax": {
"url": "Default3.aspx/GetRouteName",
"type": "GET"
},
"columns": [
{ "data": "latitude" },
{ "data": "longitude" }
],
"order": [[0, "asc"]]
});
});
});
</script>
and at he end of the page i am loading the below script
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
this is my server
[WebMethod]
public static string GetRouteName()
{
List<location> b = new List<location>();
for (int i = 0; i < 1000; i++)
{
location l = new location();
l.latitude = 1233;
l.longitude = 123123;
b.Add(l);
}
bise bb = new bise();
bb.data = b;
bb.draw = 3;
bb.recordsFiltered = 1000;
bb.recordsTotal = 1000;
return JsonConvert.SerializeObject(bb);
}
i keep getting DataTables warning: table id=example - Invalid JSON response i have tried so many turn arounds but same issue,all i need is to be able to paginate the datatable from the server because i have big data,but the ajax call is not even firing, reference this link datatable from server

Answer 1

[WebMethod]
public static string GetRouteName()
{
List<location> b = new List<location>();
for (int i = 0; i < 1000; i++)
{
location l = new location();
l.latitude = 1233;
l.longitude = 123123;
b.Add(l);
}
return JsonConvert.SerializeObject(b);
}
can you try this? is it working?

Answer 2

I'm not familiar with .NET but I would suggest simply doing it this way to respect the desired format (this is server side pseudo code, feel free to translate it to any language you desire) :
function GetRouteName() // returns an object
{
Array b = new Array();
for (int i = 0; i < 1000; i++)
{
Array l = new Array();
l.latitude = 1233;
l.longitude = 123123;
b["data"].Add(l); // Add the longitude/latitude array to a data field of the returned array
}
return JsonConvert.SerializeObject(b); // return the array b after converting it to json
}
Remember, your returned json needs to look like this :
{
"data": [
{
"longitude": "123",
"latitude": "123123"
},
{
"longitude": "123",
"latitude": "123123"
},
{
"longitude": "123",
"latitude": "123123"
}
]
}
It needs to be an object containing data, and inside that multiple objects having as key longitude and latitude with the proper parameters.