javascript - How to delete values from JSON object array in php?

Question

I have a PHP code and JSON as shown below:

PHP Code:

<?php if (!empty($_POST) && isset($_POST['savechanges']) && $_POST['savechanges'] == 1 && isset($_SESSION['pageadmin'])) {
      $output = array();     
      $output['en_desc']=$_POST['en_desc'];
      $output['code']=$_POST['code'];

      $fp = fopen('../feeds/ptp-ess_landing_scommittees.json', 'w');
      fwrite($fp, json_encode($output));
      fclose($fp);
   }
   if(file_exists('../feeds/ptp-ess_landing_scommittees.json')){
       $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));
   }
?> 
<?php if($data) { ?>
    <form method="post" id="myform" style="text-align:left;">
      <input type="hidden" id="savechanges" name="savechanges" value="1">
       <div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
         <button type="submit">Save</button>
       </div>
        <?php foreach ($data->code as $key => $value) { ?>
        <div class="house-senate-committee" style="text-align:center; margin-top:15px;">
            <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
            <input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
            <input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
        </div>
        <?php } ?>
    </form>
<?php } else { echo 'Cannot read JSON settings file'; }?>

JSON:

{"code":["AEFA","AGFO"], "en_desc":["Foreign Affairs and International Trade","Agriculture and Forestry"]}

The following DOM is generated through the PHP/JSON code above:

DOM (HTML):

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AEFA">
  <input type="text" name="en_desc[]" value="Foreign Affairs and International Trade">
</div>

<div class="house-senate-committee" style="text-align:center; margin-top:15px;">
  <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
  <input type="text" name="code[]" style="margin-right:10px;" value="AGFO">
  <input type="text" name="en_desc[]" value="Agriculture and Forestry">
</div>

The following JS code deletes a row from the DOM on click of a delete button. On refreshing the page, the deleted row comes back again as everything is rendered through JSON.

JS code:

<script>
function removeRow(el) {
  el.parentNode.remove();
}
</script>

Problem Statement:

The above JS code is deleting the row (on click of a delete button) from the DOM but on refresing the page, everything is rendered again.

I am wondering what PHP code I need to add so that it delete the values from the JSON on saving the form when row is deleted from DOM through JS.

Step 1: User delete the row from the DOM on click of a delete button.
Step 2: On saving the form and rendering the page, that deleted row should not be present.

I know I have to use unset function in order to remove the values from the JSON but I am not sure how I can integrate it in the form.

unset($data->code);
unset($data->en_desc);

Answer 1

You have a typo here:

   $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_scommittees.json'));

it should be

       $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));

Look at the "s" :)

Edit: you also were saving the new file without actually checking if there is a post happening, here is the full code:

<?php

if (isset($_POST['submit'])) {
  $output = array();
  $output['en_desc'] = $_POST['en_desc'];
  $output['code'] = $_POST['code'];

  $fp = fopen('../feeds/ptp-ess_landing_committees.json', 'w');
  fwrite($fp, json_encode($output));
  fclose($fp);
}

if (file_exists('../feeds/ptp-ess_landing_committees.json')) {
  $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_committees.json'));
}

?>
<?php if ($data) { ?>
  <form method="post" id="myform" style="text-align:left;">
    <div style="text-align:center; margin-right:9px; margin-bottom:24.703px;">
      <button type="submit" name="submit">Save</button>
    </div>
    <?php foreach ($data->code as $key => $value) { ?>
      <div class="house-senate-committee" style="text-align:center; margin-top:15px;">
        <button type="button" onclick="removeRow(this)" style="margin-right:10px;">Delete</button>
        <input type="text" name="code[]" style="margin-right:10px;" value="<?= $data->code[$key] ?>">
        <input type="text" name="en_desc[]" value="<?= $data->en_desc[$key] ?>">
      </div>
    <?php } ?>
  </form>
<?php } else {
  echo 'Cannot read JSON settings file';
} ?>

<script>
  function removeRow(el) {
    el.parentNode.remove();
  }
</script>