JSON format for Datatable is not recognized as valid

Question

JSON format for Datatable is not recognized as valid

I am attempting to set up a server-side datatable, but I keep getting an error message saying "Invalid JSON format."

Content Delivery Network (CDN)

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

HTML

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>EmployeeCode</th>
            <th>EmployeeName</th>
            <th>ManagerName</th>
            <th>DesignationName</th>
        </tr>
    </thead>
</table>

JavaScript

<script>
$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/url",
        "columns": [
            { data: "EmployeeCode" },
            { data: "EmployeeName" },
            { data: "ManagerName" },
            { data: "DesignationName" }
        ],
    } );
} );
</script>

JSON Data

{
  "Results":[{"EmployeeCode": "12345"}], // This is just a sample of data
  "CurrentPage": 1,
  "PageCount": 42,
  "PageSize": 10,
  "RecordCount": 417
}

javascript html css json datatable

Answer 1

Answer №1

Upon inspecting the JSON response from the XHR/Ajax call to the server, it becomes evident what the issue is. The expected data structure should look something like this:

[
  {'EmployeeCode':12345, EmployeeName:'abcde',...},
  {'EmployeeCode':12346, EmployeeName:'fghij',...},
  ...
]

However, the current JSON contains additional properties and the data is nested under the "Results" property. Referring to the documentation, it seems that reformatting the JSON to include a 'data' property is necessary:

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "12345",
      "John Smith",
      "Adam James",
      "Manager",
    ],
    ...
}

To address this issue, consider utilizing the 'dataSrc':'Results' property in your datatable configuration as advised by Ankush for a straightforward solution.

Answer 2

Upon inspecting the JSON response from the XHR/Ajax call to the server, it becomes evident what the issue is. The expected data structure should look something like this:

[
  {'EmployeeCode':12345, EmployeeName:'abcde',...},
  {'EmployeeCode':12346, EmployeeName:'fghij',...},
  ...
]

However, the current JSON contains additional properties and the data is nested under the "Results" property. Referring to the documentation, it seems that reformatting the JSON to include a 'data' property is necessary:

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "12345",
      "John Smith",
      "Adam James",
      "Manager",
    ],
    ...
}

To address this issue, consider utilizing the 'dataSrc':'Results' property in your datatable configuration as advised by Ankush for a straightforward solution.

Answer 3

Answer №2

To inform the datatable where to fetch data from, utilize the dataSrc attribute:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/url",
         "dataSrc": function (json) {
                   debugger;
          return json.data;
        },
        "columns": [
            { data: "EmployeeCode" },
            { data: "EmployeeName" },
            { data: "ManagerName" },
            { data: "DesignationName" }
        ],
    } );
} );

For more information on dataSrc, refer to this link.

Answer 4

To inform the datatable where to fetch data from, utilize the dataSrc attribute:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/url",
         "dataSrc": function (json) {
                   debugger;
          return json.data;
        },
        "columns": [
            { data: "EmployeeCode" },
            { data: "EmployeeName" },
            { data: "ManagerName" },
            { data: "DesignationName" }
        ],
    } );
} );

For more information on dataSrc, refer to this link.

JSON format for Datatable is not recognized as valid

Answer №1

Answer №2

Similar questions

Creating a Google map with multiple markers within a 10 km radius of the current location in a rectangular shape

Tips on keeping a div element in a fixed position until triggered by jQuery

leveraging the default browser behavior for the href and target attributes within an <a> element in Angular 2

What distinguishes CLIENT_SECRET from oauth2client credentials in Google Sheets API json files?

Only display the parent component in React if there are children components that will be rendered

When attempting to upload a file from IOS10.3.1, the server received the correct file size but retrieved incorrect data, all of which appeared as

Incorporating OpenLayers and TypeScript: Issue with Event.map.forEachFeatureAtPixel, where the argument type is not compatible with the parameter type

In Android Kitkat 4.4.4, the Ionic navbar displays icons vertically when using the <ion-buttons end> feature

Transmitting data from the backend to AngularJS during page load

Teach me how to utilize Import / require() in Static Folder

Discover the process of creating a dynamic mailto link using AJAX and HTML

Error: Trying to use Router without providing a middleware function. Please make sure to pass a valid middleware function while using Router

When using express and passport-local, the function `req.isAuthenticated()` will typically return a

Issues with AJAX formData functionality

Testing React Component State Updates

Concerning Java's Map and Array functionalities

What could be causing my ng-grid footer to refuse to align with the bottom border?

Whenever I execute the code, my if statement seems to interpret the conditions as true regardless of the actual values

Ionic retrieves a filtered array of JSON data

Incorporating and verifying unseen reCAPTCHA