Tabulator - How can I delete a row from JSON file? - json

Question

I am using Tabulator to create a table. I import information from JSON file using ajaxURL: "test.json". Data all loads fine. I have created a form to enter data into. When submitted, it goes to a PHP file that processes the data (decodes test.json, adds form data, encodes to json). Everything works fine until I try to implement a way of deleting. I have tried a few ways and none of them work. One way would create nested arrays within my json array and Tabulator will not read that. I want to be able to click the buttonCross in my Delete column and delete the row from the table and from the JSON file.
Is there anyway do delete JSON file elements without nesting arrays?
tabulator.html
<form action="process.php" method="POST">
Name:
<input type="text" name="name">
Description:
<input type="text" name="descript">
<br><br>
Latitude:
<input type="text" name="lat">
Longitude:
<input type="text" name="lon">
<br><br>
Start Date/Time:
<input type="date" name="startDate">
<input type="time" name="startTime">
<br><br>
End Date/Time:
<input type="date" name="endDate">
<input type="time" name="endTime">
<br><br>
<input type="hidden" name="deleteStatus" value="">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
//later in the file
columns:[ //define the table columns
{title:"Delete", field:"deleteStatus", formatter:"buttonCross", width:50, align:"center", headerSort:false, cellClick:function(e, cell){
if(confirm('Are you sure you want to delete this entry?')) {
cell.setValue("delete");
var row = cell.getRow();
$.ajax({
url: 'process.php',
method: 'post',
data: {row},
});
}
}},
process.php
<?php
$myFile = "test.json";
$arr_data = array(); // create empty array
$time = date("YmdHis");
try
{
//Get form data
$formdata = array(
'id'=> $time,
'deleteStatus'=> $_POST['deleteStatus'],
'name'=> $_POST['name'],
'descript'=> $_POST['descript'],
'lat'=> $_POST['lat'],
'lon'=> $_POST['lon'],
'startDate'=> $_POST['startDate'],
'startTime'=> $_POST['startTime'],
'endDate'=> $_POST['endDate'],
'endTime'=> $_POST['endTime'],
);
//Get data from existing json file
$jsondata = file_get_contents($myFile);
// converts json data into array
$arr_data = json_decode($jsondata, true);
// Push user data to array
array_push($arr_data,$formdata);
foreach($arr_data as $elementKey => $element) {
foreach($element as $valueKey => $value) {
if($valueKey == 'deleteStatus' && $value == 'delete'){
//delete this particular object from the $array
unset($arr_data[$elementKey]);
}
}
}
//Convert updated array to JSON
$jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);
//write json data into data.json file
if(file_put_contents($myFile, $jsondata)) {
header("Refresh:0; url = tabulator.html");
}
else
echo "error";
}
catch (Exception $e) {
echo 'Caught exception: ', $e->getMessage(), "\n";
}
?>

Answer 1

Check documentation you need to call an API ( like node.js) to which deletes form the json file
table.deleteRow(15)
.then(function(){
//Call your api to delete from JSON file
})
.catch(function(error){
//handle error deleting row
});
row.delete()
.then(function(){
//run code after row has been deleted
})
.catch(function(error){
//handle error deleting row
});