Delete an external .json object and save it again

Question

I have a list of resources like the following html content loaded from the resources_data.json data I loaded to my app externally from the same server.

<div class="callout">
 <div class="large-8 medium-8 small-8 columns left">Demo</div>
 <div class="large-2 medium-2 small-2 columns right">
  <a href="#" class="deleteResource" data-id="1" data-name="Demo">
 <i class="fa fa-close red"></i> DELETE</a>
 </div>
</div>

I would like to be able to delete items from this list by the "id" not having to match the "resourceName" so for every delete I will be deleting the entire object essentially I would not like to save the file back to the server to save time on the response but I am not sure if I can just delete a string of an external file without re-saving it.

MY JSON:

"calendarResources": [
    {
      "id": 1,
      "resourceName": "Demo"
    },
    {
      "id": "4",
      "resourceName": "New Test Resource"
    },
    {
      "id": "2",
      "resourceName": "test"
    },
    {
      "id": "5",
      "resourceName": "another test"
    },
    {
      "id": "6",
      "resourceName": "new test data"
    },
    {
      "id": "7",
      "resourceName": "better one"
    },
    {
      "id": "8",
      "resourceName": "the one!"
    },
    {
      "id": "12",
      "resourceName": "Dune one"
    },
    {
      "id": "13",
      "resourceName": "res test"
    }
  ]

I am trying to use the delete function to delete the string and upload the data back to the json again but something is going wrong here that nothing works and I get the same data again.

MY JS:

function deletingResource() {
        $("body").on("click", ".deleteResource", function (e) {
            e.preventDefault();

            var resourceId = $(this).data("id");
            var resourceName = $(this).data("name");

            $.getJSON(appDirLocation + "_data/resources_data.json", function (jsonData) {

                console.log(jsonData);

                var resourceDeletion = ({
                    "id": resourceId,
                    "resourceName": resourceName
                });

                delete jsonData.calendarResources[resourceDeletion]; // delete data string


                var newJsonOutput = JSON.stringify(jsonData); //stringify new data to save

                var jsonFile = new BCAPI.Models.FileSystem.File(appDirLocation + "_data/resources_data.json");

                jsonFile.upload(newJsonOutput).done(function () {
                    $("#resourcesList").html("");
                    console.log("RESOURCE DATA DELETED");
                    renderResources();
                }).error(function (jqXHR) {
                    console.log("RESOURCES JSON FAILED DELETE: " + jqXHR.responseText);
                }); // END OF JSON CREATING

                console.log(newJsonOutput);

            }).done(function () {
                $(this).closest(".resourcesData").hide();
            }).fail(function (jqXHR) {
                console.log("Request failed." + "Error code: " + jqXHR.status + "Error text: " + jqXHR.statusText + "Response text: " + jqXHR.responseText);
            });

        });

    } // DELETING RESOURCES
    deletingResource();

Thanks for the help in advance...

score 0 · Answer 1 · answered Sep 17 '17 at 21:18

Based on an answered question posted here also referencing the Array.prototype.filter() function I was able to resolve this with grace!

I Recommended for anybody looking to work with json files using javascript to check the Array property of the javascript library in MDN WEB DOCS

Code fixed:

jsonData.calendarResources = jsonData.calendarResources.filter(item => item.id != resourceId); // WORKING ######

var newJsonOutput = JSON.stringify(jsonData);
var jsonFile = new BCAPI.Models.FileSystem.File(appDirLocation + "_data/resources_data.json");

Delete an external .json object and save it again

1 Answers1