Datatable Invalid JSON response error when my JSON is valid? PHP

Question

My data table that is loading its body from another file with ajax is giving me the invalid JSON error, but when I check my developer tools under network responses my JSON is valid?

This is my PHP and SQL:

<?php 
header('Content-Type: application/json');
$output = array('data' => array());
$query = "SELECT * FROM table"; 
$stmt = sqlsrv_query($sapconn2, $query);

$x = 1;

while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){

    $output['data'][] = array(
            'col_1' => $x,
            'ID' => $row['ID'],
            'QuoteID' => $row['QuoteID'],
            'CardCode' => $row['CardCode'],
            'SlpCode' => $row['SlpCode'],
            'SlpName' => $row['SlpName'],
            'BandA' => $row['BandA'],
            'NewPrice' => $row['NewPrice']
        );
    $x ++;
}

echo json_encode($output);
?>

This is my JSON thats returned in the browser:

{
"data": [
    [1, 138, 25, "000123", "222", "test data", 222, 222],
    [2, 144, 25, "000123", "132", "test data", 465, 789],
    [3, 160, 25, "000123", "456132", "test data", 5599, 5499],
    [4, 171, 25, "000123", "789", "test data", 7897, 989],
    [5, 172, 25, "000123", "11111", "test data", 1, 11],
    [6, 182, 25, "000123", "132166", "test data", 1323, 133],
    [7, 183, 25, "000123", "135456", "test data", 1332132, 13213],
    [8, 184, 25, "000123", "1321", "test data", 5643214, 6513]
]
}

EDIT:

    var testTable = $("#testTable").DataTable({
    processing: false,
    serverSide: true,
    dataType : 'json',
    ajax: "test.php",
    columns: [
        { "data": "col_1" },
        { "data": "ID" },
        { "data": "QuoteID" },
        { "data": "CardCode" },
        { "data": "SlpCode" },
        { "data": "SlpName" },
        { "data": "BandA" },
        { "data": "NewPrice" }
    ]
    });

Answer 1

This is what datatable waits for:

{
    "data": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]
}

The "data" element is an array of objects, instead you pass an array of array.

You need something like that:

{
    "data": [
        { "id": 1, "second_field": 138, "third_field": 25, "fourth_field": "000123", ... },
        { "id": 2, "second_field": 138, "third_field": 25, "fourth_field": "000123", ... },
    ]
}

EDITED:

$output['data'][] = array(
    'col_1' => $x,
    'col_2' => $row['ID'],
    'col_3' => $row['QuoteID'],
    'col_4' => $row['CardCode'],
    'col_5' => $row['SlpCode'],
    'col_6' => $row['SlpName'],
    'col_7' => $row['BandA'],
    'col_8' => $row['NewPrice']
);

Answer 2

When you make a request to a server-side script from DataTables with processing set to true then it sends this data.

When it returns data DataTables expects the data to follow these conventions.

You can either take these into account with your server-side script (there's a good example here .) or choose a different method for adding your data. If you perhaps set processing to false you might find everything just works as you expect.

Hope that helps.