JS Grid not showing data in table - jsgrid

Question

I forced to change my nearly finished project developed on Filemaker to Open Source due to licensing issues. So I have to learn PHP, Javascript and all that stuff while programming. I am struggling now for 2 weeks with this issue. I have a php file with my JS Grid table which is also visible:
My code for the table:
$(document).ready(function() {
$('#contacts_table').jsGrid({
width: "100%",
height: "457px",
pageLoading: false,
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 2,
confirmDeleting: true,
noDataContent: "Not found",
deleteConfirm: "Do you really want to delete data?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "fetch_contacts_supplier_JS_Grid.php",
data: filter,
dataType: "json"
});
},
},
fields: [
{name: "Id", type: "number", width: 10, visible: false},
{name: "SupplierId",type: "number", width: 10, visible: false},
{name: "Title", type: "text", width: 10, validate: "required"},
{name: "Name", type: "text", width: 30, validate: "required"},
{name: "Surname", type: "text", width: 30, validate: "required"},
{name: "Position", type: "text", width: 20, validate: "required"},
{name: "Phone", type: "text", width: 30},
{name: "Mobile", type: "text", width: 30},
{name: "Fax", type: "text", width: 30},
{name: "Email", type: "text", width: 30},
{name: "Active", type: "checkbox", width: 10, validate: "required"},
{ type: "control", width: 10}
]
});
});
My code for the DB select (which works) fetch_contacts_supplier_JS_Grid.php:
if($method == 'GET') {
If ($statement = $link->prepare("SELECT * FROM suppliers_contacts WHERE _fk_SuppliersID = 1")) {
if ($statement->execute()) {
$result = $statement->get_result(); // fetchAll(PDO::FETCH_ASSOC);
while($row = $result->fetch_assoc()) {
$new_array[] = array(
'Id' => $row['_pk_SuppliersContactsID'],
'SupplierId' => $row['_fk_SuppliersID'],
'Title' => $row['Title'],
'Name' => $row['Name'],
'Surname' => $row['Surname'],
'Position' => $row['Job_Position'],
'Phone' => $row['PhoneFixed'],
'Mobile' => $row['PhoneCell'],
'Fax' => $row['PhoneFax'],
'Email' => $row['Email'],
'Active' => $row['Active']
);
}
}
header("Content-Type: application/json");
echo json_encode($new_array);
} ELSE {
echo $link->error;
}
}
The array I get in the console:
[{"Id":1,"SupplierId":1,"Title":"Mr.","Name":"Jens","Surname":"Dietzel","Position":"Owner","Phone":"145754","Mobile":"86868","Fax":"4368843","Email":"jens#jd-sd.com.na","Active":"checked"},{"Id":2,"SupplierId":1,"Title":"Mrs.","Name":"Karen","Surname":"Mann","Position":"Manager","Phone":"24525","Mobile":"745754","Fax":"544","Email":"karen#test.de","Active":"checked"}]
But the table shows not found. What am I doing wrong?